Merge pull request #467 from privacy-tech-lab/issue-464

Fixes to responsiveness and sizing
privacy-tech-lab · Feb 9, 2023 · 3a787d7 · 3a787d7
2 parents aa2a527 + 33668a9
commit 3a787d7
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 12 deletions.
diff --git a/src/libs/components/label-card/style.js b/src/libs/components/label-card/style.js
@@ -13,7 +13,6 @@ export const SCard = styled.div`
   justify-content: space-between;
   background-color: var(--cardColor);
   width: ${(props) => (props.popup ? "340px" : "250px")};
-  height: 140px;
   margin: ${(props) => props.margin};
   border-radius: 16px;
   :hover {

diff --git a/src/libs/components/website-logo/index.js b/src/libs/components/website-logo/index.js
@@ -16,8 +16,8 @@ const SWebsiteLogo = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  height: ${(props) => (props.large ? "64px" : "28px")};
-  width: ${(props) => (props.large ? "64px" : "28px")};
+  height: ${(props) => (props.large ? "64px" : "27px")};
+  width: ${(props) => (props.large ? "64px" : "27px")};
   margin: ${(props) => (props.margin ? props.margin : "0px")};
   border-radius: 50%;
   background-color: ${(props) =>
@@ -39,6 +39,7 @@ const SLetterLogo = styled.div`
     props.isLabel ? "var(--primaryTextColor)" : "var(--tintTextColor)"};
   font-weight: 700;
   font-size: ${(props) => (props.large ? "32px" : "18px")};
+  
 `;
 
 const SBrandIcon = styled.img.attrs(() => ({ alt: "Logo", src: logo }))`
@@ -74,7 +75,6 @@ export const CompanyLogo = ({ parent, large, margin }) => {
   if (Logo) {
     return (
       <SCompanyLogo margin={margin} large={large}>
-        {" "}
         <Logo />
       </SCompanyLogo>
     );

diff --git a/src/options/views/about-view/index.js b/src/options/views/about-view/index.js
@@ -79,15 +79,21 @@ const AboutView = () => {
     <Scaffold>
       <SContainer>
         <SAbout>
-          <div style={{ width: "350px" }}>
+
+
+          <div style={{flex: 1}}>
+            <div style={{ width: "300px" }}>
             <STitle>About</STitle>
             <SSubtitle>Learn more about our extension</SSubtitle>
             <SBody>
               Privacy Pioneer will inform you which websites are tracking you
               and what data they collect.
             </SBody>
           </div>
-          <img src={penguin} />
+
+          </div>
+          <img height={"150px"} src={penguin} />
+          <div style={{flex: 1}}/>
         </SAbout>
         <STitle>FAQ</STitle>
         <SBody>

diff --git a/src/options/views/about-view/style.js b/src/options/views/about-view/style.js
@@ -14,11 +14,9 @@ export const SContainer = styled.section`
 export const SAbout = styled.div`
   display: flex;
   flex-direction: row;
-  height: 25vh;
   margin-bottom: 24px;
-  width: 50%;
-  justify-content: space-between;
-  justify-self: center;
+  justify-content: center;
+  align-items: center;
 `;
 
 export const STitle = styled.div`
@@ -27,12 +25,13 @@ export const STitle = styled.div`
 `;
 
 export const SSubtitle = styled.div`
+font-size: var(--headline);
   color: var(--secondaryTextColor);
 `;
 export const SBody = styled.div`
   margin-top: 8px;
   margin-bottom: 12px;
-  font-size: var(--headline);
+  font-size: var(--body1);
   a {
     color: #3e92cc;
   }

diff --git a/src/options/views/settings-view/style.js b/src/options/views/settings-view/style.js
@@ -24,7 +24,6 @@ export const SBody = styled.div`
   display: flex;
   flex-direction: row;
   margin-top: 24px;
-  justify-content: center;
 `;
 
 export const SSection = styled.div`