fix(web): amend tab styles on homepage

reearth · Oct 29, 2024 · 5827e50 · 5827e50
1 parent 0b84bbd
commit 5827e50
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 24 deletions.
diff --git a/web/src/components/molecules/TopPage/TopPageContents.tsx b/web/src/components/molecules/TopPage/TopPageContents.tsx
@@ -63,7 +63,7 @@ const TopPageContents: React.FC<Props> = ({
   return (
     <div>
       {!version && (
-        <TabsWrapper>
+        <TabsWrapper className="homepage-tabs">
           <Tabs
             defaultActiveKey="0"
             items={tabs}

diff --git a/web/src/index.css b/web/src/index.css
@@ -18,27 +18,36 @@ p {
   margin: 0;
 }
 
-.ant-tabs-ink-bar {
-  height: 5px;
-  color: #ffffff;
-}
-
-.ant-tabs .ant-tabs-tab {
-  color: rgba(255, 255, 255, 0.8);
-}
-
-.ant-tabs .ant-tabs-ink-bar {
-  background: #ffffff !important;
-}
-
-.ant-tabs-tab:hover {
-  color: #ffffff !important;
-}
-
-.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
-  color: #ffffff !important;
-}
-
-.ant-tabs-nav::before {
-  border-bottom: none !important;
+.homepage-tabs {
+  .ant-tabs-ink-bar {
+    height: 5px;
+    color: #ffffff;
+  }
+
+  .ant-tabs .ant-tabs-tab {
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 16px !important;
+    line-height: 22px;
+    font-weight: 500;
+  }
+
+  .ant-tabs .ant-tabs-ink-bar {
+    background: #ffffff !important;
+  }
+
+  .ant-tabs-tab:hover {
+    color: #ffffff !important;
+  }
+
+  .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+    color: #ffffff !important;
+  }
+
+  .ant-tabs-nav::before {
+    border-bottom: none !important;
+  }
+
+  .ant-tabs-nav {
+    margin-bottom: 2px !important;
+  }
 }