feat: make all table headers look the same

Chia-Network · Nov 21, 2022 · fa18a3f · fa18a3f
1 parent 72c10d2
commit fa18a3f
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 33 deletions.
diff --git a/src/components/layout/Dashboard.js b/src/components/layout/Dashboard.js
@@ -14,7 +14,7 @@ const BodyText = styled('div')`
   max-width: calc(100% - 3rem);
   width: calc(100% - 3rem);
   margin: 1.5rem;
-  background-color: ${props => props.theme.colors.default.onButton};
+  background-color: ${props => props.theme.colors.default.white};
   overflow: hidden;
   box-sizing: border-box;
   padding: 0;
@@ -30,6 +30,7 @@ const InnerContainer = styled('div')`
   display: flex;
   height: 100%;
   overflow: hidden;
+  background-color: ${props => props.theme.colors.default.shade5};
 `;
 
 const Dashboard = withTheme(({ children }) => {

diff --git a/src/components/typography/Body.js b/src/components/typography/Body.js
@@ -9,6 +9,12 @@ const Text = styled('div')`
   font-weight: 400;
   width: 100%;
   line-height: 150%;
+  ${props =>
+    props.size === 'Big Bold' &&
+    css`
+      font-size: 18px;
+      font-weight: 700;
+    `}
   ${props =>
     props.size === 'Big' &&
     css`

diff --git a/src/pages/Files/index.js b/src/pages/Files/index.js
@@ -57,14 +57,15 @@ const StyledBodyNoDataFound = styled('div')`
 `;
 
 const StyledTable = styled('table')`
+  border-spacing: 0;
+  border-collapse: collapse;
   width: 100%;
 `;
 
 const StyledTh = styled('th')`
   text-align: start;
   padding: 17px;
-  background-color: ${props =>
-    props.theme.colors.default.status.info.secondary};
+  background-color: ${props => props.theme.colors.default.shade4};
   position: sticky;
   top: 0;
 `;
@@ -76,7 +77,7 @@ const StyledTd = styled('td')`
 
 const StyledTr = styled('tr')`
   :nth-child(even) {
-    background-color: ${props => props.theme.colors.default.background};
+    background-color: ${props => props.theme.colors.default.shade6};
   }
 `;
 

diff --git a/src/pages/Glossary/index.js b/src/pages/Glossary/index.js
@@ -10,7 +10,6 @@ import {
   AscendingClockIcon,
   SearchInput,
   H3,
-  H4,
 } from '../../components';
 import { getGlossary } from '../../store/actions/climateWarehouseActions';
 
@@ -41,14 +40,15 @@ const StyledBodyNoDataFound = styled('div')`
 `;
 
 const StyledTable = styled('table')`
+  border-spacing: 0;
+  border-collapse: collapse;
   width: 100%;
 `;
 
 const StyledTh = styled('th')`
   text-align: start;
   padding: 17px;
-  background-color: ${props =>
-    props.theme.colors.default.status.info.secondary};
+  background-color: ${props => props.theme.colors.default.shade4};
   position: sticky;
   top: 0;
 `;
@@ -60,7 +60,7 @@ const StyledTd = styled('td')`
 
 const StyledTr = styled('tr')`
   :nth-child(even) {
-    background-color: ${props => props.theme.colors.default.background};
+    background-color: ${props => props.theme.colors.default.shade6};
   }
 `;
 
@@ -221,17 +221,15 @@ const Glossary = () => {
               </StyledTr>
             </thead>
             <tbody>
-              {Object.entries(filteredFileList).map(file => (
-                <StyledTr key={file.id}>
+              {Object.entries(filteredFileList).map((file, index) => (
+                <StyledTr key={index}>
                   <StyledTd>
                     <Body>{file[0]}</Body>
                   </StyledTd>
                   <StyledTd>
-                    {file[1].map(term => (
-                      <DescriptionContainer key={term.id}>
-                        <H4>
-                          <u>{term.split(';')[0]}</u>
-                        </H4>
+                    {file[1].map((term, index) => (
+                      <DescriptionContainer key={index}>
+                        <Body size="Bold">{term.split(';')[0]}</Body>
                         <Body>{term.split(';')[1]}</Body>
                       </DescriptionContainer>
                     ))}

diff --git a/src/pages/Organization/index.js b/src/pages/Organization/index.js
@@ -8,7 +8,6 @@ import {
   Body,
   CopyIcon,
   H2,
-  H4,
   PrimaryButton,
   SubscriptionModal,
   OrgEditFormModal,
@@ -82,9 +81,9 @@ const Organization = () => {
           <FormattedMessage id="organization-information" />
         </H2>
         <StyledItemContainer>
-          <H4>
+          <Body size="Big Bold">
             <FormattedMessage id="organization-name" />
-          </H4>
+          </Body>
           <Body size="Big">
             {myOrganization.name}
             <StyledCopyIconContainer>
@@ -99,9 +98,9 @@ const Organization = () => {
           </Body>
         </StyledItemContainer>
         <StyledItemContainer>
-          <H4>
+          <Body size="Big Bold">
             <FormattedMessage id="org-uid" />
-          </H4>
+          </Body>
           <Body size="Big">
             {myOrgUid}
             <StyledCopyIconContainer>
@@ -117,16 +116,16 @@ const Organization = () => {
         </StyledItemContainer>
 
         <StyledItemContainer>
-          <H4>
+          <Body size="Big Bold">
             <FormattedMessage id="spendable-balance" />
-          </H4>
+          </Body>
           <Body size="Big">{walletBalance} xch</Body>
         </StyledItemContainer>
 
         <StyledItemContainer>
-          <H4>
+          <Body size="Big Bold">
             <FormattedMessage id="wallet-sync-status" />
-          </H4>
+          </Body>
           <Body size="Big">
             {isWalletSynced ? (
               <>
@@ -147,9 +146,9 @@ const Organization = () => {
         </StyledItemContainer>
 
         <StyledItemContainer>
-          <H4>
+          <Body size="Big Bold">
             <FormattedMessage id="public-address" />
-          </H4>
+          </Body>
           <Body size="Big">
             {myOrganization.xchAddress}
             <StyledCopyIconContainer>
@@ -164,25 +163,25 @@ const Organization = () => {
           </Body>
         </StyledItemContainer>
         <StyledItemContainer>
-          <H4>
+          <Body size="Big Bold">
             <FormattedMessage id="address-qr-code" />
-          </H4>
+          </Body>
           <QRCode value={myOrganization.xchAddress} />
         </StyledItemContainer>
         <StyledItemContainer>
-          <H4>
+          <Body size="Big Bold">
             <FormattedMessage id="organization-subscriptions" />
-          </H4>
+          </Body>
           <PrimaryButton
             label={intl.formatMessage({ id: 'manage' })}
             size="large"
             onClick={() => setIsSubscriptionsModalDisplayed(true)}
           />
         </StyledItemContainer>
         <StyledItemContainer>
-          <H4>
+          <Body size="Big Bold">
             <FormattedMessage id="actions" />
-          </H4>
+          </Body>
           <StyledRowContainer>
             <PrimaryButton
               label={intl.formatMessage({ id: 'edit-organization' })}

diff --git a/src/theme.js b/src/theme.js
@@ -36,8 +36,9 @@ const colors = {
     shade6: '#ecf3f7',
     red: '#ff5c53',
     redDark: '#c64740',
+    white: '#FFFFFF',
     blue: '#47b2fa',
-    background: '#F0F2F5',
+    background: '#c8d0d5',
     onSurface: '#000000',
     onButton: '#FFFFFF',
     status: {