rename tabs and fix tab layout

ScottLogic · Oct 5, 2023 · a25a24f · a25a24f
1 parent dd2d373
commit a25a24f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 12 deletions.
diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlayTabs.css b/frontend/src/components/HandbookOverlay/HandbookOverlayTabs.css
@@ -1,14 +1,14 @@
-.tabs {
+.handbook-tabs {
   display: flex;
   flex-wrap: wrap;
   width: 100%;
   position: absolute;
   top: -50px; /* position above overlay */
-  left: 0;
+  left: 2rem;
   z-index: -1;
 }
 
-.tabs label {
+.handbook-tabs label {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -21,19 +21,19 @@
   border-radius: 10px 10px 0 0;
 }
 
-.tabs label:not(:first-child):not(:last-child) {
+.handbook-tabs label:not(:first-child):not(:last-child) {
   border-right: 2px solid #000;
 }
 
-.tabs [type="radio"] {
+.handbook-tabs [type="radio"] {
   display: none;
 }
 
-.tabs [type="radio"]:checked + label {
+.handbook-tabs [type="radio"]:checked + label {
   background-color: var(--overlay-background-colour);
 }
 
-.tabs [type="radio"]:checked + label + .tab {
+.handbook-tabs [type="radio"]:checked + label + .tab {
   display: block;
 }
 
@@ -42,16 +42,16 @@
     font-size: 1.125rem;
   }
 
-  .tabs-container {
+  .handbook-tabs-container {
     padding: 4rem 4rem;
   }
 
-  .tabs label {
+  .handbook-tabs label {
     order: 1;
     width: auto;
   }
 
-  .tabs .tab {
+  .handbook-tabs .tab {
     order: 9;
   }
 }
diff --git a/frontend/src/components/HandbookOverlay/HandbookOverlayTabs.tsx b/frontend/src/components/HandbookOverlay/HandbookOverlayTabs.tsx
@@ -13,12 +13,12 @@ function HandbookOverlayTabs({
   ];
 
   return (
-    <div className="tabs">
+    <div className="handbook-tabs">
       {tabs.map((tab) => (
         <div key={tab.id}>
           <input
             type="radio"
-            name="tabs"
+            name="handbook-tabs"
             id={tab.id.toString()}
             defaultChecked={tab.id === HANDBOOK_PAGES.MISSION_INFO}
             onClick={() => {

diff --git a/frontend/src/components/Overlay/Overlay.css b/frontend/src/components/Overlay/Overlay.css
@@ -29,6 +29,10 @@
   border-radius: 10px;
 }
 
+.overlay .handbook-overlay {
+  border-radius: 0;
+}
+
 .overlay > .close-button {
   position: absolute;
   right: 16px;