Tweak styles to make focus rings consistent

ScottLogic · Oct 6, 2023 · 67f65f9 · 67f65f9
1 parent ac2fada
commit 67f65f9
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 8 deletions.
diff --git a/frontend/src/components/ControlPanel/ControlPanel.css b/frontend/src/components/ControlPanel/ControlPanel.css
@@ -1,18 +1,29 @@
-#control-panel {
+.control-panel {
   height: 100%;
   overflow-y: auto;
   padding: 30px;
 }
 
-.control-collapsible-section {
+.control-panel .control-collapsible-section {
   background-color: var(--control-body-background-colour);
   margin-bottom: 0.75rem;
   border-radius: 0.5rem;
 }
 
-.control-collapsible-section-header {
+.control-panel .control-collapsible-section-header {
   background-color: var(--control-header-background-colour);
   padding: 0.75rem;
+  border-radius: 0.5rem;
   cursor: default;
-  outline-color: white;
+}
+
+.control-panel
+  .control-collapsible-section[open]
+  .control-collapsible-section-header {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.control-panel .control-collapsible-section-header:focus-visible {
+  border-radius: 0;
 }
diff --git a/frontend/src/components/ControlPanel/ControlPanel.tsx b/frontend/src/components/ControlPanel/ControlPanel.tsx
@@ -52,7 +52,7 @@ function ControlPanel({
   }
 
   return (
-    <div id="control-panel">
+    <div className="control-panel">
       {/* hide defence box on levels 1 and 2 */}
       {(currentLevel === LEVEL_NAMES.LEVEL_3 ||
         currentLevel === LEVEL_NAMES.SANDBOX) && (

diff --git a/frontend/src/components/DefenceBox/DefenceBox.css b/frontend/src/components/DefenceBox/DefenceBox.css
@@ -1,3 +1,3 @@
-#defence-box {
+.defence-box {
   position: relative;
 }
diff --git a/frontend/src/components/DefenceBox/DefenceBox.tsx b/frontend/src/components/DefenceBox/DefenceBox.tsx
@@ -24,7 +24,7 @@ function DefenceBox({
   ) => Promise<boolean>;
 }) {
   return (
-    <div id="defence-box">
+    <div className="defence-box">
       {defences.map((defence, index) => {
         return (
           <DefenceMechanism

diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.css b/frontend/src/components/DefenceBox/DefenceMechanism.css
@@ -25,7 +25,7 @@
 }
 
 .defence-mechanism label.switch:focus-within {
-  outline: white auto 1px;
+  outline-style: auto;
   border-radius: 0.5rem;
 }