Vivid Code Gen

components/Archive.module.css

@@ -0,0 +1,4 @@
+.archiveImage{
+  width: 13px;
+  height: 13px;
+}

components/Archive.tsx

@@ -0,0 +1,11 @@
+import styles from "./Archive.module.css";
+import archive from "./archive.svg";
+export const Archive = ({ override }: { override?: React.CSSProperties }) => {
+  return (
+    <img
+     className={styles.archiveImage}
+     src={archive.src}
+     style={override}
+   /> 
+  );
+};

components/At.module.css

@@ -0,0 +1,4 @@
+.atComponent{
+  width: 13px;
+  height: 13px;
+}

components/At.tsx

@@ -0,0 +1,5 @@
+import styles from "./At.module.css";
+import at from "./at.svg";
+export const At = ({ override }: { override?: React.CSSProperties }) => {
+  return <img className={styles.atComponent} src={at.src} style={override} />;
+};

components/Calendar.module.css

@@ -0,0 +1,4 @@
+.calendarComponent{
+  width: 13px;
+  height: 13px;
+}

components/Calendar.tsx

@@ -0,0 +1,11 @@
+import styles from "./Calendar.module.css";
+import calendar from "./calendar.svg";
+export const Calendar = ({ override }: { override?: React.CSSProperties }) => {
+  return (
+    <img
+      className={styles.calendarComponent}
+      src={calendar.src}
+      style={override}
+    />
+  );
+};

components/Compose.module.css

@@ -0,0 +1,4 @@
+.composeImage{
+  width: 14px;
+  height: 14px;
+}

components/Compose.tsx

@@ -0,0 +1,11 @@
+import styles from "./Compose.module.css";
+import compose from "./compose.svg";
+export const Compose = ({ override }: { override?: React.CSSProperties }) => {
+  return (
+    <img
+     className={styles.composeImage}
+     src={compose.src}
+     style={override}
+   /> 
+  );
+};

components/Contacts.module.css

@@ -0,0 +1,4 @@
+.contactsComponent{
+  width: 13px;
+  height: 13px;
+}

components/Contacts.tsx

@@ -0,0 +1,11 @@
+import styles from "./Contacts.module.css";
+import contacts from "./contacts.svg";
+export const Contacts = ({ override }: { override?: React.CSSProperties }) => {
+  return (
+    <img
+      className={styles.contactsComponent}
+      src={contacts.src}
+      style={override}
+    />
+  );
+};

components/Draft.module.css

@@ -0,0 +1,4 @@
+.draftImage{
+  width: 11px;
+  height: 13px;
+}

components/Draft.tsx

@@ -0,0 +1,5 @@
+import styles from "./Draft.module.css";
+import draft from "./draft.svg";
+export const Draft = ({ override }: { override?: React.CSSProperties }) => {
+  return (<img className={styles.draftImage} src={draft.src} style={override} />);
+};

components/Header.module.css

@@ -0,0 +1,14 @@
+.mail{
+  color: rgba(255, 255, 255, 0.28);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 16.9px;
+}
+.headerComponent{
+  display: flex;
+  align-items: center;
+  height: fit-content;
+  padding: 8px 20px;
+  border-radius: 4px;
+  width: 239px;
+}

components/Header.tsx

@@ -0,0 +1,14 @@
+import styles from "./Header.module.css";
+export const Header = ({
+  override,
+  headerText,
+}: {
+  override?: React.CSSProperties;
+  headerText: string;
+}) => {
+  return (
+    <div className={styles.headerComponent} style={override}>
+      <p className={styles.mail}>{headerText}</p>
+    </div>
+  );
+};

components/Import.module.css

@@ -0,0 +1,4 @@
+.importComponent {
+  width: 13px;
+  height: 12px;
+}

components/Import.tsx

@@ -0,0 +1,13 @@
+import styles from "./Import.module.css";
+import import from "./import.svg";
+
+
+export const Import = ({
+  override
+}: {
+  override?: React.CSSProperties;
+}) => {
+
+
+  return <img className={styles.importComponent} src={import.src} style={override} />;
+};

components/InboxIcon.module.css

@@ -0,0 +1,4 @@
+.inboxIconComponent {
+  width: 16px;
+  height: 16px;
+}

components/InboxIcon.tsx

@@ -0,0 +1,11 @@
+import styles from "./InboxIcon.module.css";
+import inboxIcon from "./inboxIcon.svg";
+export const InboxIcon = ({ override }: { override?: React.CSSProperties }) => {
+  return (
+    <img
+      className={styles.inboxIconComponent}
+      src={inboxIcon.src}
+      style={override}
+    />
+  );
+};

components/Invite.module.css

@@ -0,0 +1,4 @@
+.inviteComponent{
+  width: 13px;
+  height: 12px;
+}

components/Invite.tsx

@@ -0,0 +1,7 @@
+import styles from "./Invite.module.css";
+import invite from "./invite.svg";
+export const Invite = ({ override }: { override?: React.CSSProperties }) => {
+  return (
+    <img className={styles.inviteComponent} src={invite.src} style={override} />
+  );
+};

components/Search.module.css

@@ -0,0 +1,4 @@
+.searchComponent{
+  width: 14px;
+  height: 14px;
+}

components/Search.tsx

@@ -0,0 +1,7 @@
+import styles from "./Search.module.css";
+import search from "./search.svg";
+export const Search = ({ override }: { override?: React.CSSProperties }) => {
+  return (
+    <img className={styles.searchComponent} src={search.src} style={override} />
+  );
+};

components/Send.module.css

@@ -0,0 +1,4 @@
+.sendComponent{
+  width: 13px;
+  height: 13px;
+}

components/Send.tsx

@@ -0,0 +1,7 @@
+import styles from "./Send.module.css";
+import send from "./send.svg";
+export const Send = ({ override }: { override?: React.CSSProperties }) => {
+  return (
+    <img className={styles.sendComponent} src={send.src} style={override} />
+  );
+};

components/SendFeedback.module.css

@@ -0,0 +1,4 @@
+.sendFeedbackImage{
+  width: 13px;
+  height: 13px;
+}

components/SendFeedback.tsx

@@ -0,0 +1,15 @@
+import styles from "./SendFeedback.module.css";
+import sendFeedback from "./sendFeedback.svg";
+export const SendFeedback = ({
+  override,
+}: {
+  override?: React.CSSProperties;
+}) => {
+  return (
+    <img
+     className={styles.sendFeedbackImage}
+     src={sendFeedback.src}
+     style={override}
+   /> 
+  );
+};

components/Settings.module.css

@@ -0,0 +1,4 @@
+.settingsImage{
+  width: 13px;
+  height: 13px;
+}

components/Settings.tsx

@@ -0,0 +1,11 @@
+import styles from "./Settings.module.css";
+import settings from "./settings.svg";
+export const Settings = ({ override }: { override?: React.CSSProperties }) => {
+  return (
+    <img
+     className={styles.settingsImage}
+     src={settings.src}
+     style={override}
+   /> 
+  );
+};

components/Sidebar.module.css

@@ -0,0 +1,95 @@
+.imageClass{
+  position: absolute;
+  inset: 0;
+  height: 100%;
+  width: 100%;
+}
+.mailIconClass{
+  overflow: hidden;
+  border-radius: 10px;
+  position: relative;
+  width: 38px;
+  height: 38px;
+}
+.skiffMailClass{
+  color: rgb(255, 255, 255);
+  font-size: 15px;
+  font-weight: 300;
+  line-height: 19.5px;
+}
+.aryamanWorkspaceClass{
+  color: rgba(255, 255, 255, 0.54);
+  font-size: 13px;
+  font-weight: 300;
+  line-height: 16.9px;
+}
+.textClass{
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: fit-content;
+  width: fit-content;
+}
+.workspaceClass{
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  height: fit-content;
+  padding: 10px;
+  width: 100%;
+}
+.overallOptionsClass{
+  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;
+}
+.mailTabsClass{
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  height: fit-content;
+  padding: 0px 0px 12px;
+  width: 239px;
+}
+.mailOptionsClass{
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0px 0px 140px;
+  width: 100%;
+  height: 598px;
+}
+.shareOptionsClass{
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: fit-content;
+  width: 100%;
+}
+.sidebarComponentClass{
+  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;
+}