From 513b0e26770a8a7af8818d1606cb3f2604112bac Mon Sep 17 00:00:00 2001 From: "vivid-github[bot]" <129557859+vivid-github[bot]@users.noreply.github.com> Date: Tue, 14 Nov 2023 23:40:30 +0000 Subject: [PATCH 1/2] Add new components --- components/Archive.tsx | 9 ++ components/At.tsx | 9 ++ components/Calendar.tsx | 9 ++ components/Compose.tsx | 9 ++ components/Contacts.tsx | 9 ++ components/Draft.tsx | 9 ++ components/Header.tsx | 28 +++++ components/Import.tsx | 17 +++ components/InboxIcon.tsx | 9 ++ components/Invite.tsx | 9 ++ components/Search.tsx | 9 ++ components/Send.tsx | 9 ++ components/SendFeedback.tsx | 13 ++ components/Settings.tsx | 9 ++ components/Sidebar.tsx | 231 ++++++++++++++++++++++++++++++++++++ components/SidebarTab.tsx | 95 +++++++++++++++ components/Spam.tsx | 9 ++ components/Trash.tsx | 9 ++ components/archive.svg | 3 + components/at.svg | 3 + components/calendar.svg | 3 + components/compose.svg | 3 + components/contacts.svg | 3 + components/draft.svg | 3 + components/import.svg | 3 + components/inboxIcon.svg | 3 + components/invite.svg | 3 + components/mailIcon.png | Bin 0 -> 8574 bytes components/search.svg | 3 + components/send.svg | 3 + components/sendFeedback.svg | 3 + components/settings.svg | 3 + components/spam.svg | 3 + components/trash.svg | 3 + 34 files changed, 546 insertions(+) create mode 100644 components/Archive.tsx create mode 100644 components/At.tsx create mode 100644 components/Calendar.tsx create mode 100644 components/Compose.tsx create mode 100644 components/Contacts.tsx create mode 100644 components/Draft.tsx create mode 100644 components/Header.tsx create mode 100644 components/Import.tsx create mode 100644 components/InboxIcon.tsx create mode 100644 components/Invite.tsx create mode 100644 components/Search.tsx create mode 100644 components/Send.tsx create mode 100644 components/SendFeedback.tsx create mode 100644 components/Settings.tsx create mode 100644 components/Sidebar.tsx create mode 100644 components/SidebarTab.tsx create mode 100644 components/Spam.tsx create mode 100644 components/Trash.tsx create mode 100644 components/archive.svg create mode 100644 components/at.svg create mode 100644 components/calendar.svg create mode 100644 components/compose.svg create mode 100644 components/contacts.svg create mode 100644 components/draft.svg create mode 100644 components/import.svg create mode 100644 components/inboxIcon.svg create mode 100644 components/invite.svg create mode 100644 components/mailIcon.png create mode 100644 components/search.svg create mode 100644 components/send.svg create mode 100644 components/sendFeedback.svg create mode 100644 components/settings.svg create mode 100644 components/spam.svg create mode 100644 components/trash.svg diff --git a/components/Archive.tsx b/components/Archive.tsx new file mode 100644 index 00000000..ae8d149a --- /dev/null +++ b/components/Archive.tsx @@ -0,0 +1,9 @@ +import archive from "./archive.svg"; +import styled from "styled-components"; +const ArchiveComponent = styled.img` + width: 13px; + height: 13px; +`; +export const Archive = ({ override }: { override?: React.CSSProperties }) => { + return ; +}; diff --git a/components/At.tsx b/components/At.tsx new file mode 100644 index 00000000..c963df58 --- /dev/null +++ b/components/At.tsx @@ -0,0 +1,9 @@ +import at from "./at.svg"; +import styled from "styled-components"; +const AtComponent = styled.img` + width: 13px; + height: 13px; +`; +export const At = ({ override }: { override?: React.CSSProperties }) => { + return ; +}; diff --git a/components/Calendar.tsx b/components/Calendar.tsx new file mode 100644 index 00000000..0ad6f5b8 --- /dev/null +++ b/components/Calendar.tsx @@ -0,0 +1,9 @@ +import calendar from "./calendar.svg"; +import styled from "styled-components"; +const CalendarComponent = styled.img` + width: 13px; + height: 13px; +`; +export const Calendar = ({ override }: { override?: React.CSSProperties }) => { + return ; +}; diff --git a/components/Compose.tsx b/components/Compose.tsx new file mode 100644 index 00000000..fc7d1b7b --- /dev/null +++ b/components/Compose.tsx @@ -0,0 +1,9 @@ +import compose from "./compose.svg"; +import styled from "styled-components"; +const ComposeComponent = styled.img` + width: 14px; + height: 14px; +`; +export const Compose = ({ override }: { override?: React.CSSProperties }) => { + return ; +}; diff --git a/components/Contacts.tsx b/components/Contacts.tsx new file mode 100644 index 00000000..ffa6651f --- /dev/null +++ b/components/Contacts.tsx @@ -0,0 +1,9 @@ +import contacts from "./contacts.svg"; +import styled from "styled-components"; +const ContactsComponent = styled.img` + width: 13px; + height: 13px; +`; +export const Contacts = ({ override }: { override?: React.CSSProperties }) => { + return ; +}; diff --git a/components/Draft.tsx b/components/Draft.tsx new file mode 100644 index 00000000..984e2638 --- /dev/null +++ b/components/Draft.tsx @@ -0,0 +1,9 @@ +import draft from "./draft.svg"; +import styled from "styled-components"; +const DraftComponent = styled.img` + width: 11px; + height: 13px; +`; +export const Draft = ({ override }: { override?: React.CSSProperties }) => { + return ; +}; diff --git a/components/Header.tsx b/components/Header.tsx new file mode 100644 index 00000000..93c34fe0 --- /dev/null +++ b/components/Header.tsx @@ -0,0 +1,28 @@ +import styled from "styled-components"; +const Mail = styled.p` + color: rgba(255, 255, 255, 0.28); + font-size: 13px; + font-weight: 500; + line-height: 16.9px; +`; +const HeaderComponent = styled.div` + display: flex; + align-items: center; + height: fit-content; + padding: 8px 20px; + border-radius: 4px; + width: 239px; +`; +export const Header = ({ + override, + headerText, +}: { + override?: React.CSSProperties; + headerText: string; +}) => { + return ( + + {headerText} + + ); +}; diff --git a/components/Import.tsx b/components/Import.tsx new file mode 100644 index 00000000..d2c57d5d --- /dev/null +++ b/components/Import.tsx @@ -0,0 +1,17 @@ +import import from "./import.svg"; +import styled from "styled-components"; +const ImportComponent = styled.img` + width: 13px; + height: 12px; +`; + + +export const Import = ({ + override +}: { + override?: React.CSSProperties; +}) => { + + + return ; +}; \ No newline at end of file diff --git a/components/InboxIcon.tsx b/components/InboxIcon.tsx new file mode 100644 index 00000000..66bdd0fc --- /dev/null +++ b/components/InboxIcon.tsx @@ -0,0 +1,9 @@ +import inboxIcon from "./inboxIcon.svg"; +import styled from "styled-components"; +const InboxIconComponent = styled.img` + width: 16px; + height: 16px; +`; +export const InboxIcon = ({ override }: { override?: React.CSSProperties }) => { + return ; +}; diff --git a/components/Invite.tsx b/components/Invite.tsx new file mode 100644 index 00000000..af499f33 --- /dev/null +++ b/components/Invite.tsx @@ -0,0 +1,9 @@ +import invite from "./invite.svg"; +import styled from "styled-components"; +const InviteComponent = styled.img` + width: 13px; + height: 12px; +`; +export const Invite = ({ override }: { override?: React.CSSProperties }) => { + return ; +}; diff --git a/components/Search.tsx b/components/Search.tsx new file mode 100644 index 00000000..46712471 --- /dev/null +++ b/components/Search.tsx @@ -0,0 +1,9 @@ +import search from "./search.svg"; +import styled from "styled-components"; +const SearchComponent = styled.img` + width: 14px; + height: 14px; +`; +export const Search = ({ override }: { override?: React.CSSProperties }) => { + return ; +}; diff --git a/components/Send.tsx b/components/Send.tsx new file mode 100644 index 00000000..998e2306 --- /dev/null +++ b/components/Send.tsx @@ -0,0 +1,9 @@ +import send from "./send.svg"; +import styled from "styled-components"; +const SendComponent = styled.img` + width: 13px; + height: 13px; +`; +export const Send = ({ override }: { override?: React.CSSProperties }) => { + return ; +}; diff --git a/components/SendFeedback.tsx b/components/SendFeedback.tsx new file mode 100644 index 00000000..b51bba4d --- /dev/null +++ b/components/SendFeedback.tsx @@ -0,0 +1,13 @@ +import sendFeedback from "./sendFeedback.svg"; +import styled from "styled-components"; +const SendFeedbackComponent = styled.img` + width: 13px; + height: 13px; +`; +export const SendFeedback = ({ + override, +}: { + override?: React.CSSProperties; +}) => { + return ; +}; diff --git a/components/Settings.tsx b/components/Settings.tsx new file mode 100644 index 00000000..aca95623 --- /dev/null +++ b/components/Settings.tsx @@ -0,0 +1,9 @@ +import settings from "./settings.svg"; +import styled from "styled-components"; +const SettingsComponent = styled.img` + width: 13px; + height: 13px; +`; +export const Settings = ({ override }: { override?: React.CSSProperties }) => { + return ; +}; diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx new file mode 100644 index 00000000..48cf818e --- /dev/null +++ b/components/Sidebar.tsx @@ -0,0 +1,231 @@ +import mailIcon from "./mailIcon.png"; +import { SidebarTab } from "./SidebarTab"; +import { Compose } from "./Compose"; +import { Search } from "./Search"; +import { Settings } from "./Settings"; +import { Header } from "./Header"; +import { InboxIcon } from "./InboxIcon"; +import { Send } from "./Send"; +import { Calendar } from "./Calendar"; +import { Draft } from "./Draft"; +import { Import } from "./Import"; +import { Spam } from "./Spam"; +import { Archive } from "./Archive"; +import { Trash } from "./Trash"; +import { At } from "./At"; +import { Contacts } from "./Contacts"; +import { Invite } from "./Invite"; +import { SendFeedback } from "./SendFeedback"; +import styled from "styled-components"; +const Image = styled.img` + position: absolute; + inset: 0; + height: 100%; + width: 100%; +`; +const MailIcon = styled.div` + overflow: hidden; + border-radius: 10px; + position: relative; + width: 38px; + height: 38px; +`; +const SkiffMail = styled.p` + color: rgb(255, 255, 255); + font-size: 15px; + font-weight: 300; + line-height: 19.5px; +`; +const AryamanSWorkspace = styled.p` + color: rgba(255, 255, 255, 0.54); + font-size: 13px; + font-weight: 300; + line-height: 16.9px; +`; +const Text = styled.div` + display: flex; + flex-direction: column; + align-items: flex-start; + height: fit-content; + width: fit-content; +`; +const Workspace = styled.div` + display: flex; + align-items: flex-start; + gap: 12px; + height: fit-content; + padding: 10px; + width: 100%; +`; +const OverallOptions = styled.div` + display: flex; + flex-direction: column; + align-items: flex-start; + height: fit-content; + padding: 0px 0px 13px; + width: 100%; + border-style: solid; + border-color: rgba(255, 255, 255, 0.04); + border-bottom-width: 1px; +`; +const MailTabs = styled.div` + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 2px; + height: fit-content; + padding: 0px 0px 12px; + width: 239px; +`; +const MailOptions = styled.div` + overflow: hidden; + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px 0px 140px; + width: 100%; + height: 598px; +`; +const ShareOptions = styled.div` + display: flex; + flex-direction: column; + align-items: flex-start; + height: fit-content; + width: 100%; +`; +const SidebarComponent = styled.div` + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + padding: 0px 1px 0px 0px; + width: 100%; + height: 902px; + border-style: solid; + border-color: rgba(255, 255, 255, 0.04); + border-right-width: 1px; + background: linear-gradient( + rgba(255, 255, 255, 0.1), + rgba(255, 255, 255, 0.1) + ), + linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)); + font-family: Roboto; +`; +export const Sidebar = ({ override }: { override?: React.CSSProperties }) => { + const sidebarTabProps = [ + { + status: "Highlighted", + icon: , + label: "Compose", + }, + { + status: "Inactive", + icon: , + label: "Search", + }, + { + status: "Inactive", + icon: , + label: "Settings", + }, + ]; + const sidebarTabProps1 = [ + { + status: "Selected", + icon: , + label: "Inbox", + override: { + height: "fit-content", + width: "239px", + }, + }, + { + status: "Inactive", + icon: , + label: "Sent", + }, + { + status: "Inactive", + icon: , + label: "Send later", + }, + { + status: "Inactive", + icon: , + label: "Drafts", + }, + { + status: "Inactive", + icon: , + label: "Imports", + }, + { + status: "Inactive", + icon: , + label: "Spam", + }, + { + status: "Inactive", + icon: , + label: "Archive", + }, + { + status: "Inactive", + icon: , + label: "Trash", + }, + ]; + const sidebarTabProps2 = [ + { + status: "Inactive", + icon: , + label: "Contacts", + }, + { + status: "Inactive", + icon: , + label: "Invite", + }, + { + status: "Inactive", + icon: , + label: "Send feedback", + }, + ]; + return ( + + + + + + + Skiff Mail + aryaman&#39;s workspace + + + + {sidebarTabProps.map((props, i) => ( + + ))} + + +
+ + {sidebarTabProps1.map((props, i) => ( + + ))} + +
+ } label="aryaman@skiff.com" /> +
+
+ + + {sidebarTabProps2.map((props, i) => ( + + ))} + + + ); +}; diff --git a/components/SidebarTab.tsx b/components/SidebarTab.tsx new file mode 100644 index 00000000..11213d35 --- /dev/null +++ b/components/SidebarTab.tsx @@ -0,0 +1,95 @@ +import { InboxIcon } from "./InboxIcon"; +import styled from "styled-components"; +const Inbox = styled.p` + font-size: 15px; + font-weight: 300; + line-height: 19.5px; +`; +const Content = styled.div` + display: flex; + align-items: center; + gap: 8px; + padding: 2px 5px 2px 9px; + border-radius: 6px; + width: 100%; + height: 32px; +`; +const SidebarTabComponent = styled.div` + display: flex; + flex-direction: column; + align-items: flex-start; + height: fit-content; + padding: 0px 6px; + width: 239px; +`; +export const SidebarTab = ({ + override, + status, + icon, + label, +}: { + override?: React.CSSProperties; + status: string; + icon: React.ReactNode; + label: string; +}) => { + const inboxStatus = { + Selected: { + color: "rgb(255, 255, 255)", + }, + Inactive: { + color: "rgb(149, 149, 149)", + }, + Highlighted: { + color: "rgb(255, 255, 255)", + }, + }[status]; + const contentStatus = { + Selected: { + backgroundColor: "rgb(41, 41, 41)", + }, + Inactive: { + backgroundColor: "rgb(25, 25, 25)", + }, + Highlighted: { + borderStyle: "solid", + borderColor: "rgb(51, 51, 51)", + borderWidth: "1px", + backgroundColor: "rgb(41, 41, 41)", + }, + }[status]; + const sidebarTabStatus = { + Selected: { + justifyContent: "center", + }, + Inactive: { + justifyContent: "flex-start", + }, + Highlighted: { + justifyContent: "flex-start", + }, + }[status]; + return ( + + + {icon} + + {label} + + + + ); +}; diff --git a/components/Spam.tsx b/components/Spam.tsx new file mode 100644 index 00000000..a14b4f60 --- /dev/null +++ b/components/Spam.tsx @@ -0,0 +1,9 @@ +import spam from "./spam.svg"; +import styled from "styled-components"; +const SpamComponent = styled.img` + width: 13px; + height: 13px; +`; +export const Spam = ({ override }: { override?: React.CSSProperties }) => { + return ; +}; diff --git a/components/Trash.tsx b/components/Trash.tsx new file mode 100644 index 00000000..10161e87 --- /dev/null +++ b/components/Trash.tsx @@ -0,0 +1,9 @@ +import trash from "./trash.svg"; +import styled from "styled-components"; +const TrashComponent = styled.img` + width: 11px; + height: 13px; +`; +export const Trash = ({ override }: { override?: React.CSSProperties }) => { + return ; +}; diff --git a/components/archive.svg b/components/archive.svg new file mode 100644 index 00000000..d6e4dc9b --- /dev/null +++ b/components/archive.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/at.svg b/components/at.svg new file mode 100644 index 00000000..91fedd12 --- /dev/null +++ b/components/at.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/calendar.svg b/components/calendar.svg new file mode 100644 index 00000000..679ad376 --- /dev/null +++ b/components/calendar.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/compose.svg b/components/compose.svg new file mode 100644 index 00000000..a1e2cad3 --- /dev/null +++ b/components/compose.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/contacts.svg b/components/contacts.svg new file mode 100644 index 00000000..275961f3 --- /dev/null +++ b/components/contacts.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/draft.svg b/components/draft.svg new file mode 100644 index 00000000..d7c04260 --- /dev/null +++ b/components/draft.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/import.svg b/components/import.svg new file mode 100644 index 00000000..a93bc104 --- /dev/null +++ b/components/import.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/inboxIcon.svg b/components/inboxIcon.svg new file mode 100644 index 00000000..2d7680b5 --- /dev/null +++ b/components/inboxIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/invite.svg b/components/invite.svg new file mode 100644 index 00000000..789421fc --- /dev/null +++ b/components/invite.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/mailIcon.png b/components/mailIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..7b464b366cf7a234bebe65027f75f5b737fb1e61 GIT binary patch literal 8574 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○K~c#rU#PewcPD=w+q>t6pthO>Stda=wM%x1`S^i+oOze# zdZC?*z`&>{N98*Qda8h&1&AiIp{)(-h$3a4B%S<1UBp#edi| zPj;}xukq|Xp0wmJZnv-=lmnOl@z6t3f-Myl$fu|DUiH3F3NOpd+H>ak_VB9jw#1*0 z2b=Qr`u^`(4En=}4WP@Crc^* zd=ZP^ig2q(ZIWq9Afz*#>cS4~2pM1XB*8Yn5;kYE!+5W$g-)!_>W>7;5c{Z>0h)Pb zL@B{G0vb+@SXq-Ie-A}$G`Cw7wo8-^L&}&&1W6=hL01iPnX`& z{<-C8Y5owKR1(7x^jNx|$xocV0!+=9qR+gPgId>}*7~bT!>H%u_4R|;b=s(kBMAb8 zOHjOt*n)_~D-agizb}64`cJ~sJ>qxHL*-7igSk!Bi-iLZqjE%#REnjlOBc5J=lElj zQm?zL-#720kXl1h-YK*dEG8?nBOweZXMWz7lZCq39${VF1aJ3i_P;{N2DuFZ>*vL> zI97@16*@OL!~^}HMejc-YLB?iKQ*Zi6Bs7j3P&khz#y<)> zgo>4(YB+EtQDuZTS7u*u223w!yHk3UT3U*~?VRo=Ui+-12Th4}dcHi?H0j$%SHXMl z%N3_Dk3T+nOO2X454w;+bWc=F>1-O(0<7P(Z3Trn=f{xzu9-paHwZj8H!#JS7hGL7 zV@Tcz@;E+oZN5eSbheKD+b0UT+uu;A9lCxCMon6RkVG!QE59fEXnz$k;fLv2tcpQk zwdvc#msj<+Mch#(5A>JVfqYBtv@L%t_ilS{nP_DvE)-sfq+6Gmdvs1`)LRI`)JDL# zqd!~%pMS)prx2!{4q@J2og^oFqzJ61t+MP5x;{4R`|vf2V^7oR^yG@ZjR8W+#)QUW@=bGS^M_y8;vboh+!7$VnJ`G zDqIEY=jLgs8aMs)OXqWQtaB^Ez&z1Vu@CLla7kISzGyA7R<+>n#G81%)OC?Vpjj90PP!2fWiY@+sa4{c>_W2E zepz+~$M+(_-ST9yLq?_f!71h)=a35^Fx<}5Rsb}M;@by2T9 z#YK@DK4#5g!N9dwssScYLOXxCdL#Cz<=3yrTJmb9)^H*+^4u7i%}z@Pl)+xNbr%$Z zZoJ@3c@}_*Br$Lw0t|oH2bsT)f~jGs0Kg!^+YmVNv^kf#w||i1*EdF%+RPUA z6G(_=GBC&s6ja1OFq+eH&;Qyqnzm?(+#h*{*J|Dl+=PS-UL(Qn$j`zY4zD7U&waJ+1Qc>zl;db1}$K3i}}_?m^X4K zcc+1lN^zO(qc0$-;X?^dHF%0hA@_}g-h-=iYe5g5ThpnThAu}7*q=5Bq^5z@8%IiTSVq-4lBnJE8k;B@&%3A7L7A`!V5c!!aPJ=yj( zx_X(x?#2~ap1qd~11+S4gv53if_k$}F{IkA1zioiYm}0op#Aj5Y4pPQTitMocPt8% zO}L5{i|^k&dMF0adVMkAE4%Vylp(#kh;VjtPpV_ZZRiK{%a|h_A>JhGFPf*9g~LRV zFcy%>$+NTbbp45}`~T8REqO|XJ`9v+kU~$x-bw{bHu=Ror~WPhxN+S;3>^< BcxM0r literal 0 HcmV?d00001 diff --git a/components/search.svg b/components/search.svg new file mode 100644 index 00000000..1d06aa91 --- /dev/null +++ b/components/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/send.svg b/components/send.svg new file mode 100644 index 00000000..9ddbe459 --- /dev/null +++ b/components/send.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/sendFeedback.svg b/components/sendFeedback.svg new file mode 100644 index 00000000..de0a83ca --- /dev/null +++ b/components/sendFeedback.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/settings.svg b/components/settings.svg new file mode 100644 index 00000000..6fc7b4d2 --- /dev/null +++ b/components/settings.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/spam.svg b/components/spam.svg new file mode 100644 index 00000000..329bac38 --- /dev/null +++ b/components/spam.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/trash.svg b/components/trash.svg new file mode 100644 index 00000000..5c2501c3 --- /dev/null +++ b/components/trash.svg @@ -0,0 +1,3 @@ + + + From b4510814726f7d6e616c1ea9a566f1f20c16aef4 Mon Sep 17 00:00:00 2001 From: "vivid-github[bot]" <129557859+vivid-github[bot]@users.noreply.github.com> Date: Tue, 14 Nov 2023 23:41:01 +0000 Subject: [PATCH 2/2] Modularize generated code --- components/Sidebar.tsx | 62 ++++++++++++++++++++++++++------------- components/SidebarTab.tsx | 4 +++ 2 files changed, 45 insertions(+), 21 deletions(-) diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx index 48cf818e..3e2200d9 100644 --- a/components/Sidebar.tsx +++ b/components/Sidebar.tsx @@ -17,12 +17,14 @@ import { Contacts } from "./Contacts"; import { Invite } from "./Invite"; import { SendFeedback } from "./SendFeedback"; import styled from "styled-components"; + const Image = styled.img` position: absolute; inset: 0; height: 100%; width: 100%; `; + const MailIcon = styled.div` overflow: hidden; border-radius: 10px; @@ -30,18 +32,21 @@ const MailIcon = styled.div` width: 38px; height: 38px; `; + const SkiffMail = styled.p` color: rgb(255, 255, 255); font-size: 15px; font-weight: 300; line-height: 19.5px; `; + const AryamanSWorkspace = styled.p` color: rgba(255, 255, 255, 0.54); font-size: 13px; font-weight: 300; line-height: 16.9px; `; + const Text = styled.div` display: flex; flex-direction: column; @@ -49,6 +54,7 @@ const Text = styled.div` height: fit-content; width: fit-content; `; + const Workspace = styled.div` display: flex; align-items: flex-start; @@ -57,6 +63,7 @@ const Workspace = styled.div` padding: 10px; width: 100%; `; + const OverallOptions = styled.div` display: flex; flex-direction: column; @@ -68,6 +75,7 @@ const OverallOptions = styled.div` border-color: rgba(255, 255, 255, 0.04); border-bottom-width: 1px; `; + const MailTabs = styled.div` display: flex; flex-direction: column; @@ -77,6 +85,7 @@ const MailTabs = styled.div` padding: 0px 0px 12px; width: 239px; `; + const MailOptions = styled.div` overflow: hidden; display: flex; @@ -86,6 +95,7 @@ const MailOptions = styled.div` width: 100%; height: 598px; `; + const ShareOptions = styled.div` display: flex; flex-direction: column; @@ -93,6 +103,7 @@ const ShareOptions = styled.div` height: fit-content; width: 100%; `; + const SidebarComponent = styled.div` overflow: hidden; display: flex; @@ -112,6 +123,7 @@ const SidebarComponent = styled.div` linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)); font-family: Roboto; `; + export const Sidebar = ({ override }: { override?: React.CSSProperties }) => { const sidebarTabProps = [ { @@ -195,32 +207,13 @@ export const Sidebar = ({ override }: { override?: React.CSSProperties }) => { ]; return ( - - - - - - Skiff Mail - aryaman&#39;s workspace - - + {sidebarTabProps.map((props, i) => ( ))} - -
- - {sidebarTabProps1.map((props, i) => ( - - ))} - -
- } label="aryaman@skiff.com" /> -
-
- + {sidebarTabProps2.map((props, i) => ( @@ -229,3 +222,30 @@ export const Sidebar = ({ override }: { override?: React.CSSProperties }) => { ); }; + +const AryamansWorkspace = () => ( + + + + + + Skiff Mail + aryaman&#39;s workspace + + +); + +const MailOptions = ({ sidebarTabProps1 }: any) => ( + +
+ + {sidebarTabProps1.map((props, i) => ( + + ))} + +
+ } label="aryaman@skiff.com" /> +
+
+ +); diff --git a/components/SidebarTab.tsx b/components/SidebarTab.tsx index 11213d35..d15ac8ec 100644 --- a/components/SidebarTab.tsx +++ b/components/SidebarTab.tsx @@ -1,10 +1,12 @@ import { InboxIcon } from "./InboxIcon"; import styled from "styled-components"; + const Inbox = styled.p` font-size: 15px; font-weight: 300; line-height: 19.5px; `; + const Content = styled.div` display: flex; align-items: center; @@ -14,6 +16,7 @@ const Content = styled.div` width: 100%; height: 32px; `; + const SidebarTabComponent = styled.div` display: flex; flex-direction: column; @@ -22,6 +25,7 @@ const SidebarTabComponent = styled.div` padding: 0px 6px; width: 239px; `; + export const SidebarTab = ({ override, status,