first commit

2024-01-11 18:24:41 -06:00
commit 4c1fb67383
103 changed files with 29954 additions and 0 deletions
--- a/src/styles/account-page.scss
+++ b/src/styles/account-page.scss
@@ -0,0 +1,202 @@
+@use "sass:map";
+
+$account-padding-base: 15px;
+$account-border-radius: 6px;
+$account-menu-item-padding: 6px;
+$account-card-background: #f5f5f5;
+$account-menu-item-hover-background: #f5f5f5;
+$account-support-title-padding: 10px;
+
+.account-container {
+  margin-top: 25px;
+  display: flex;
+  flex-direction: column;
+  gap: $account-padding-base;
+}
+
+.account-column {
+  display: flex;
+  flex-direction: column;
+  gap: $account-padding-base;
+  background-color: #fff;
+  margin-bottom: 2rem;
+}
+
+.account-left-column {
+  display: flex;
+  flex-direction: column;
+  gap: $account-padding-base;
+  background-color: #f5f5f5;
+  border: 1px solid #e9e9e9;
+  border-radius: $account-border-radius;
+  height: 1136px;
+}
+
+.account-section {
+  font-weight: bold;
+}
+
+.account-group {
+  display: flex;
+  flex-direction: column;
+  gap: $account-padding-base;
+}
+
+.account-card {
+  background: $account-card-background;
+  border-radius: 6px;
+
+  padding: $account-padding-base;
+  text-align: center;
+
+  &-title {
+    font-size: 1.1em;
+    color: $primary;
+    margin: 0 0 $account-padding-base 0;
+  }
+
+  &-description {
+    margin: $account-padding-base 0;
+  }
+
+  &-actions {
+    margin: $account-padding-base 0 0 0;
+    text-align: center;
+  }
+  &-right-account {
+    border: 1px solid #e9e9e9;
+  }
+}
+
+.account-docs-generated {
+  border: 1px solid #e9e9e9;
+  .account-card-title {
+    margin: $account-padding-base 0;
+    font-size: 1.3em;
+  }
+
+  .account-card-actions {
+    text-align: right;
+  }
+
+  &-progress-bar {
+    margin: $account-padding-base 0;
+  }
+}
+
+.account-support {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-gap: $account-padding-base;
+  text-align: left;
+
+  &-title {
+    position: absolute;
+    top: 0;
+    padding: 0 6px;
+    font-size: 0.9em;
+    background: #a0a0a0;
+    color: $white;
+  }
+
+  &-info {
+    position: relative;
+    padding-top: $account-support-title-padding + $account-padding-base;
+    &-title {
+      left: -$account-padding-base;
+      border-radius: 0px $account-border-radius $account-border-radius 0px;
+    }
+  }
+
+  &-links {
+    position: relative;
+    overflow: hidden;
+    background: $white;
+    border-radius: $account-border-radius;
+    padding: $account-support-title-padding + $account-padding-base
+      $account-padding-base $account-padding-base $account-padding-base;
+
+    &-title {
+      left: 0;
+      border-radius: 0px 0px $account-border-radius 0px;
+    }
+  }
+}
+
+.account-info {
+  text-align: left;
+
+  &-name {
+    font-weight: bold;
+  }
+}
+
+.account-menu {
+  padding: $account-padding-base - $account-menu-item-padding;
+  border-radius: $account-border-radius;
+
+  &-item {
+    margin: 2px 0px;
+    letter-spacing: 0.03rem;
+    font-weight: 500;
+    a,
+    a:hover,
+    a:link,
+    a:visited {
+      display: block;
+      color: inherit;
+      padding: $account-menu-item-padding;
+      text-decoration: none;
+    }
+    a:hover {
+      background-color: #fff;
+      border-left: 1px solid var(--accent-orange);
+    }
+  }
+}
+
+.account-subscriptions {
+  text-align: left;
+
+  &-title {
+    font-size: 1.1em;
+    font-weight: 500;
+  }
+
+  &-item {
+    margin: $account-padding-base 0;
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    justify-content: space-between;
+
+    &-label {
+      font-weight: 500;
+    }
+
+    &-value {
+      flex: 0 0 80%;
+      max-width: 80%;
+    }
+  }
+
+  &-actions {
+    text-align: right;
+  }
+}
+
+@media only screen and (min-width: map.get($grid-breakpoints, "md")) {
+  .account-container {
+    display: grid;
+    grid-template-columns: 1fr 2fr 1fr;
+    grid-gap: $account-padding-base;
+  }
+}
+
+@media only screen and (min-width: map.get($grid-breakpoints, "lg")) {
+  .account-group {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: $account-padding-base;
+  }
+}