feat: expand top icons

useflyyer · Oct 27, 2020 · 78726db · 78726db
1 parent a4d74ca
commit 78726db
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/components/elements.tsx b/components/elements.tsx
@@ -47,13 +47,15 @@ export const SocialIcon = styled.img.attrs<{
   src: string;
   fit?: "medium" | "small" | null;
   background?: string | null;
+  simplify?: boolean | null;
 }>((props) => ({
   src: props.src,
-}))<{ src: string; fit?: "medium" | "small" | null; background?: string | null }>`
+}))<{ src: string; fit?: "medium" | "small" | null; background?: string | null; simplify?: boolean | null }>`
   width: ${(props) => (props.fit ? (props.fit === "medium" ? "2.5rem" : "3rem") : "4rem")};
   height: auto;
   margin: 0rem 1rem;
   border-radius: 1rem;
+  border: ${(props) => (props.simplify ? "solid 0.5px lightgray" : "")};
   background-color: ${(props) => props.background ?? "unset"};
   padding: ${(props) => (props.fit ? (props.fit === "medium" ? "0.75rem" : "0.5rem") : "0rem")};
 `;
diff --git a/components/layers.tsx b/components/layers.tsx
@@ -38,12 +38,12 @@ export const Content = styled(Layer)`
   align-items: center;
 `;
 
-export const IconsTop = styled(Layer)`
+export const IconsTop = styled(Layer)<{ expanded?: boolean | null }>`
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
   align-items: flex-start;
-  padding: 7rem 10rem;
+  padding: ${(props) => (props.expanded ? "7rem 0rem" : "7rem 10rem")};
 `;
 
 export const IconsBottom = styled(Layer)`

diff --git a/templates/main.tsx b/templates/main.tsx
@@ -31,19 +31,19 @@ export default function MainTemplate({ variables }) {
       <HeaderStart>
         <Logo>FLAYYER</Logo>
       </HeaderStart>
-      <IconsTop>
+      <IconsTop expanded>
         <SocialIcon src={Twitter} />
-        <SocialIcon src={Teams} background="white" fit="small" />
+        <SocialIcon src={Teams} background="white" fit="small" simplify={simplify} />
         <SocialIcon src={Discord} />
-        <SocialIcon src={Slack} background="white" fit="medium" />
+        <SocialIcon src={Slack} background="white" fit="medium" simplify={simplify} />
         <SocialIcon src={Messenger} />
       </IconsTop>
       <Content>
         <Title simplify={simplify}>{title}</Title>
         {description && <Description simplify={simplify}>{description}</Description>}
       </Content>
       <IconsBottom>
-        <SocialIcon src={Facebook} background="white" />
+        <SocialIcon src={Facebook} background="white" simplify={simplify} />
         <SocialIcon src={WhatsApp} />
         <SocialIcon src={Instagram} />
         <SocialIcon src={LinkedIn} />