Merge remote-tracking branch 'upstream/dev' into feature/onboarding-p…

…age-style-update
webpilot-ai · Oct 25, 2023 · 52e93a9 · 52e93a9
2 parents adcbc85 + 51fe96a
commit 52e93a9
Show file tree

Hide file tree

Showing 8 changed files with 152 additions and 13 deletions.
diff --git a/src/options/TheEntry.vue b/src/options/TheEntry.vue
@@ -1,8 +1,11 @@
 <template>
   <div :class="index['setting-page-wrap']">
     <nav :class="index['setting-nav']">
-      <IconLogoWithText :class="index['setting-nav-logo']" />
-      <IconLogoWithTextDark :class="index['setting-nav-logo-dark']" />
+      <div :class="index['logo-with-text']">
+        <IconLogoWithText :class="index['setting-nav-logo']" />
+        <IconLogoWithTextDark :class="index['setting-nav-logo-dark']" />
+      </div>
+      <div :class="index['logo-only']"><IconLogo /></div>
       <NavItem
         :activated="activatedTab === TabList.Account"
         :name="TabList.Account"
@@ -12,12 +15,18 @@
         :activated="activatedTab === TabList.Extension"
         :name="TabList.Extension"
         @change="onChangeTab"
-      />
+      >
+        <template #outline><IconNavExtensionOutline /> </template>
+        <template #filled><IconNavExtensionFilled /> </template>
+      </NavItem>
       <NavItem
         :activated="activatedTab === TabList.About"
         :name="TabList.About"
         @change="onChangeTab"
-      />
+      >
+        <template #outline><IconNavAboutOutline /> </template>
+        <template #filled><IconNavAboutFilled /> </template>
+      </NavItem>
     </nav>
     <main :class="index.main">
       <component :is="currentComponent" />
@@ -31,8 +40,14 @@ import {storeToRefs} from 'pinia'
 
 import useStore from '@/stores/store'
 
+import IconLogo from './images/icon-logo.vue'
 import IconLogoWithText from './images/icon-logo-with-text.vue'
 import IconLogoWithTextDark from './images/icon-logo-with-text-dark.vue'
+import IconNavExtensionFilled from './images/icon-nav-extension-filled.vue'
+import IconNavExtensionOutline from './images/icon-nav-extension-outline.vue'
+import IconNavAboutOutline from './images/icon-nav-about-outline.vue'
+import IconNavAboutFilled from './images/icon-nav-about-filled.vue'
+
 import NavItem from './components/NavItem.vue'
 import AccountView from './views/AccountView.vue'
 import ExtensionView from './views/ExtensionView.vue'
@@ -72,6 +87,7 @@ const currentComponent = computed(() => {
 
 <style module="index" lang="scss">
 body {
+  min-width: 600px;
   margin: 0;
 }
 
@@ -98,6 +114,10 @@ body {
   display: none;
 }
 
+.logo-only {
+  display: none;
+}
+
 .main {
   padding: 36px 48px;
   padding-bottom: 14px;
@@ -130,4 +150,37 @@ body {
     margin-left: 12px;
   }
 }
+
+@media only screen and (width <= 700px) {
+  .main {
+    width: 100%;
+    padding: 36px 22px;
+  }
+
+  .setting-page-wrap {
+    grid-template-columns: 56px 1fr;
+  }
+
+  .setting-nav {
+    justify-self: center;
+    width: 36px;
+    padding: 0;
+    padding-top: 16px;
+  }
+
+  .logo-with-text {
+    display: none;
+  }
+
+  .logo-only {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 94px;
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+}
 </style>
diff --git a/src/options/components/CreditWebpilotStatus.vue b/src/options/components/CreditWebpilotStatus.vue
@@ -5,13 +5,15 @@
         <div :class="$style['credit-progress-frame']"></div>
         <div :class="$style['credit-progress-bar']" :style="{width: percentage}"></div>
       </div>
-      <Popper arrow arrow-padding="0" :class="$style.popper" hover offset-distance="0">
-        <IconQuestions :class="$style['question-icon']" />
-        <template #content>
-          <div>API limits to 50 times per week. It refreshes every Monday at 0:00 UTC+0</div>
-        </template>
-      </Popper>
-      <span :class="$style['credit-text']">{{ usage.current }}/{{ usage.total }} available</span>
+      <div :class="$style['credit-text-group']">
+        <Popper arrow arrow-padding="0" :class="$style.popper" hover offset-distance="0">
+          <IconQuestions :class="$style['question-icon']" />
+          <template #content>
+            <div>API limits to 50 times per week. It refreshes every Monday at 0:00 UTC+0</div>
+          </template>
+        </Popper>
+        <span :class="$style['credit-text']">{{ usage.current }}/{{ usage.total }} available</span>
+      </div>
     </div>
   </div>
 </template>
@@ -67,6 +69,11 @@ const percentage = computed(() => `${(usage.value.current / usage.value.total) *
   opacity: 0.7;
 }
 
+.credit-text-group {
+  display: flex;
+  align-items: center;
+}
+
 .question-icon {
   margin-right: 6px;
   border: 0;
@@ -81,4 +88,15 @@ const percentage = computed(() => `${(usage.value.current / usage.value.total) *
 .credit-text {
   margin-left: 6px;
 }
+
+@media only screen and (width <= 700px) {
+  .credit-status {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .credit-text-group {
+    margin-top: 16px;
+  }
+}
 </style>
diff --git a/src/options/components/NavItem.vue b/src/options/components/NavItem.vue
@@ -73,13 +73,17 @@ const onChange = () => {
 
 .icon-outline {
   display: block;
+  width: 24px;
+  height: 24px;
 }
 
 .active-nav {
   font-weight: 600;
 
   .icon-filled {
     display: block;
+    width: 24px;
+    height: 24px;
   }
 
   .icon-outline {
@@ -107,6 +111,8 @@ const onChange = () => {
 
   .icon-filled {
     display: block;
+    width: 24px;
+    height: 24px;
   }
 
   .icon-outline {
@@ -128,4 +134,19 @@ const onChange = () => {
     background-color: #585c8a;
   }
 }
+
+@media only screen and (width <= 700px) {
+  .nav-label {
+    display: none;
+  }
+
+  .nav-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 7px 0;
+  }
+}
 </style>
diff --git a/src/options/images/icon-nav-about-filled.vue b/src/options/images/icon-nav-about-filled.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M6.99828 2.99072C4.78929 2.99072 2.99829 4.78173 2.99829 6.99074V16.9908C2.99829 19.1998 4.78929 20.9908 6.99828 20.9908H16.9983C19.2073 20.9908 20.9983 19.1998 20.9983 16.9908V6.99074C20.9983 4.78173 19.2073 2.99072 16.9983 2.99072H6.99828ZM11.9983 6.99074C12.5503 6.99074 12.9983 7.43874 12.9983 7.99074C12.9983 8.54274 12.5503 8.99074 11.9983 8.99074C11.4463 8.99074 10.9983 8.54274 10.9983 7.99074C10.9983 7.43874 11.4463 6.99074 11.9983 6.99074ZM10.9983 9.99075C11.1603 9.99075 11.8723 9.99075 11.9983 9.99075C12.6293 9.99075 13.0913 10.5597 12.9673 11.1787L12.2173 14.9908H12.9983C13.5503 14.9908 13.9983 15.4388 13.9983 15.9908C13.9983 16.5428 13.5503 16.9908 12.9983 16.9908H11.9983C10.8153 16.9908 9.98527 15.9638 10.2173 14.8028L10.8103 11.9287C10.3573 11.8327 9.99828 11.4728 9.99828 10.9907C9.99828 10.4387 10.4463 9.99075 10.9983 9.99075Z"
+      fill="#292929"
+    />
+  </svg>
+</template>
diff --git a/src/options/images/icon-nav-about-outline.vue b/src/options/images/icon-nav-about-outline.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M6.99829 2.99072C4.78929 2.99072 2.99829 4.78173 2.99829 6.99074V16.9908C2.99829 19.1998 4.78929 20.9908 6.99829 20.9908H16.9983C19.2073 20.9908 20.9983 19.1998 20.9983 16.9908V6.99074C20.9983 4.78173 19.2073 2.99072 16.9983 2.99072H6.99829ZM6.99829 4.99073H16.9983C18.1033 4.99073 18.9983 5.88573 18.9983 6.99074V16.9908C18.9983 18.0958 18.1033 18.9908 16.9983 18.9908H6.99829C5.89329 18.9908 4.99829 18.0958 4.99829 16.9908V6.99074C4.99829 5.88573 5.89329 4.99073 6.99829 4.99073ZM11.9983 6.99074C11.4463 6.99074 10.9983 7.43874 10.9983 7.99074C10.9983 8.54274 11.4463 8.99074 11.9983 8.99074C12.5503 8.99074 12.9983 8.54274 12.9983 7.99074C12.9983 7.43874 12.5503 6.99074 11.9983 6.99074ZM10.9983 9.99075C10.4463 9.99075 9.99829 10.4387 9.99829 10.9907C9.99829 11.4728 10.3573 11.8327 10.8103 11.9287L10.2173 14.8028C9.98529 15.9638 10.8153 16.9908 11.9983 16.9908H12.9983C13.5503 16.9908 13.9983 16.5428 13.9983 15.9908C13.9983 15.4388 13.5503 14.9908 12.9983 14.9908H12.2173L12.9673 11.1787C13.0913 10.5597 12.6293 9.99075 11.9983 9.99075C11.8723 9.99075 11.1603 9.99075 10.9983 9.99075Z"
+      fill="#585B58"
+    />
+  </svg>
+</template>
diff --git a/src/options/images/icon-nav-extension-filled.vue b/src/options/images/icon-nav-extension-filled.vue
@@ -0,0 +1,10 @@
+<template>
+  <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path
+      clip-rule="evenodd"
+      d="M8.96856 22H3.91869C3.40997 21.9995 2.92222 21.7972 2.5625 21.4375C2.20278 21.0778 2.00048 20.59 2 20.0813V16.0412C2 15.8002 2.09576 15.569 2.26621 15.3985C2.43666 15.2281 2.66785 15.1323 2.9089 15.1323H4.92939C5.09125 15.1317 5.25101 15.0958 5.39753 15.027C5.54404 14.9582 5.67377 14.8583 5.77764 14.7341C5.88151 14.61 5.95702 14.4647 5.9989 14.3083C6.04077 14.152 6.048 13.9884 6.02008 13.829C5.95597 13.5609 5.80132 13.3232 5.58224 13.1559C5.36316 12.9887 5.09308 12.9022 4.8176 12.911H2.9089C2.66785 12.911 2.43666 12.8152 2.26621 12.6448C2.09576 12.4743 2 12.2431 2 12.0021V7.962C2.00048 7.45328 2.20278 6.96553 2.5625 6.60581C2.92222 6.24609 3.40997 6.04379 3.91869 6.04331H7.04986V4.93263C7.04926 4.50663 7.1416 4.08564 7.32045 3.699C7.4993 3.31237 7.76034 2.96941 8.08538 2.69405C8.41041 2.41869 8.79161 2.21755 9.20238 2.10468C9.61315 1.9918 10.0436 1.9699 10.4637 2.0405C11.1584 2.17387 11.7839 2.54754 12.2306 3.09597C12.6773 3.64441 12.9167 4.3326 12.9068 5.03988V6.04331H16.0407C16.5494 6.04379 17.0372 6.24609 17.3969 6.60581C17.7566 6.96553 17.9589 7.45328 17.9594 7.962V11.0932H18.9592C19.6661 11.0839 20.3538 11.3235 20.9018 11.7702C21.4498 12.2168 21.8233 12.842 21.9568 13.5363C22.027 13.9561 22.0049 14.3862 21.8921 14.7967C21.7793 15.2071 21.5783 15.588 21.3033 15.9129C21.0283 16.2378 20.6859 16.4989 20.2997 16.6781C19.9136 16.8572 19.493 16.95 19.0674 16.9501H17.9567V20.0813C17.9562 20.59 17.7539 21.0778 17.3942 21.4375C17.0345 21.7972 16.5467 21.9995 16.038 22H13.0077C12.7667 22 12.5355 21.9042 12.365 21.7338C12.1946 21.5633 12.0988 21.3322 12.0988 21.0911V19.0706C12.0981 18.9087 12.062 18.7489 11.9931 18.6024C11.9242 18.4559 11.8242 18.3262 11.7 18.2223C11.5758 18.1185 11.4304 18.043 11.274 18.0011C11.1177 17.9592 10.954 17.952 10.7945 17.9799C10.5266 18.0441 10.2889 18.1987 10.1219 18.4178C9.95475 18.6369 9.86843 18.907 9.87746 19.1824V21.0911C9.87746 21.3322 9.7817 21.5633 9.61125 21.7338C9.44079 21.9042 9.20961 22 8.96856 22ZM4.08495 20.1822C4.03201 20.1475 3.98264 20.1074 3.93767 20.0625C3.89265 20.0174 3.85251 19.968 3.81781 19.915V20.0813C3.81781 20.1081 3.82843 20.1337 3.84735 20.1526C3.86627 20.1716 3.89194 20.1822 3.91869 20.1822H4.08495Z"
+      fill="#292929"
+      fill-rule="evenodd"
+    />
+  </svg>
+</template>
diff --git a/src/options/images/icon-nav-extension-outline.vue b/src/options/images/icon-nav-extension-outline.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M3.91869 22H8.96856C9.20961 22 9.44079 21.9042 9.61125 21.7338C9.7817 21.5633 9.87746 21.3322 9.87746 21.0911V19.1824C9.86843 18.907 9.95475 18.6369 10.1219 18.4178C10.2889 18.1987 10.5266 18.0441 10.7945 17.9799C10.954 17.952 11.1177 17.9592 11.274 18.0011C11.4304 18.043 11.5758 18.1185 11.7 18.2223C11.8242 18.3262 11.9242 18.4559 11.9931 18.6024C12.062 18.7489 12.0981 18.9087 12.0988 19.0706V21.0911C12.0988 21.3322 12.1946 21.5633 12.365 21.7338C12.5355 21.9042 12.7667 22 13.0077 22H16.038C16.5467 21.9995 17.0345 21.7972 17.3942 21.4375C17.7539 21.0778 17.9562 20.59 17.9567 20.0813V16.9501H19.0674C19.493 16.95 19.9136 16.8572 20.2997 16.6781C20.6859 16.4989 21.0283 16.2378 21.3033 15.9129C21.5783 15.588 21.7793 15.2071 21.8921 14.7967C22.0049 14.3862 22.027 13.9561 21.9568 13.5363C21.8233 12.842 21.4498 12.2168 20.9018 11.7702C20.3538 11.3235 19.6661 11.0839 18.9592 11.0932H17.9594V7.962C17.9589 7.45328 17.7566 6.96553 17.3969 6.60581C17.0372 6.24609 16.5494 6.04379 16.0407 6.04331H12.9068V5.03988C12.9167 4.3326 12.6773 3.64441 12.2306 3.09597C11.7839 2.54754 11.1584 2.17387 10.4637 2.0405C10.0436 1.9699 9.61315 1.9918 9.20238 2.10468C8.79161 2.21755 8.41041 2.41869 8.08538 2.69405C7.76034 2.96941 7.4993 3.31237 7.32045 3.699C7.1416 4.08564 7.04926 4.50663 7.04986 4.93263V6.04331H3.91869C3.40997 6.04379 2.92222 6.24609 2.5625 6.60581C2.20278 6.96553 2.00048 7.45328 2 7.962V12.0021C2 12.2431 2.09576 12.4743 2.26621 12.6448C2.43666 12.8152 2.66785 12.911 2.9089 12.911H4.8176C5.09308 12.9022 5.36316 12.9887 5.58224 13.1559C5.80132 13.3232 5.95597 13.5609 6.02008 13.829C6.048 13.9884 6.04077 14.152 5.9989 14.3083C5.95702 14.4647 5.88151 14.61 5.77764 14.7341C5.67377 14.8583 5.54404 14.9582 5.39753 15.027C5.25101 15.0958 5.09125 15.1317 4.92939 15.1323H2.9089C2.66785 15.1323 2.43666 15.2281 2.26621 15.3985C2.09576 15.569 2 15.8002 2 16.0412V20.0813C2.00048 20.59 2.20278 21.0778 2.5625 21.4375C2.92222 21.7972 3.40997 21.9995 3.91869 22ZM3.81781 16.9501H4.92848C5.35407 16.9499 5.7745 16.857 6.16054 16.6778C6.54657 16.4986 6.88894 16.2375 7.16384 15.9126C7.43874 15.5877 7.63957 15.2068 7.75236 14.7964C7.86515 14.3861 7.8872 13.9561 7.81698 13.5363C7.6836 12.8416 7.30994 12.2161 6.76151 11.7694C6.21307 11.3227 5.52488 11.0833 4.8176 11.0932H3.81781V7.962C3.81781 7.93524 3.82843 7.90958 3.84735 7.89066C3.86627 7.87174 3.89194 7.86111 3.91869 7.86111H7.95877C8.07812 7.86111 8.19631 7.8376 8.30659 7.79193C8.41686 7.74625 8.51706 7.6793 8.60146 7.5949C8.68585 7.5105 8.7528 7.41031 8.79848 7.30003C8.84416 7.18976 8.86767 7.07157 8.86767 6.95221V4.93263C8.86762 4.77039 8.90309 4.61011 8.97158 4.46304C9.04008 4.31597 9.13993 4.18567 9.26414 4.0813C9.38834 3.97693 9.53389 3.90101 9.69056 3.85888C9.84723 3.81674 10.0112 3.80941 10.171 3.8374C10.4392 3.90135 10.677 4.05596 10.8443 4.27508C11.0116 4.49419 11.098 4.76436 11.089 5.03988V6.94857C11.089 7.18963 11.1848 7.42081 11.3552 7.59127C11.5257 7.76172 11.7569 7.85748 11.9979 7.85748H16.038C16.0648 7.85748 16.0904 7.86811 16.1093 7.88703C16.1283 7.90595 16.1389 7.93161 16.1389 7.95836V12.0021C16.1389 12.2431 16.2346 12.4743 16.4051 12.6448C16.5756 12.8152 16.8067 12.911 17.0478 12.911H18.9565C19.2321 12.9019 19.5024 12.9884 19.7217 13.1556C19.9409 13.3229 20.0957 13.5607 20.1599 13.829C20.1875 13.9887 20.18 14.1526 20.1377 14.3091C20.0955 14.4657 20.0195 14.6111 19.9152 14.7352C19.8109 14.8593 19.6807 14.9592 19.5338 15.0278C19.3869 15.0964 19.2268 15.1321 19.0646 15.1323H17.0478C16.8067 15.1323 16.5756 15.2281 16.4051 15.3985C16.2346 15.569 16.1389 15.8002 16.1389 16.0412V20.0813C16.1389 20.1081 16.1283 20.1337 16.1093 20.1526C16.0904 20.1716 16.0648 20.1822 16.038 20.1822H13.9166V19.0715C13.9167 18.6458 13.824 18.2252 13.6449 17.8391C13.4658 17.4529 13.2047 17.1104 12.8797 16.8354C12.5547 16.5604 12.1737 16.3596 11.7632 16.247C11.3527 16.1343 10.9226 16.1125 10.5028 16.183C9.80812 16.3164 9.18258 16.6901 8.73586 17.2385C8.28914 17.7869 8.04974 18.4751 8.05965 19.1824V20.1822H3.91869C3.89194 20.1822 3.86627 20.1716 3.84735 20.1526C3.82843 20.1337 3.81781 20.1081 3.81781 20.0813V16.9501Z"
+      fill="#585B58"
+    />
+  </svg>
+</template>
diff --git a/src/options/views/AboutView.vue b/src/options/views/AboutView.vue
@@ -53,6 +53,7 @@ onMounted(() => {
 .about-view {
   display: flex;
   flex-direction: column;
+  width: 100%;
   height: 100%;
   color: var(--color-baseline-text);
   font-weight: 400;
@@ -70,6 +71,7 @@ onMounted(() => {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   row-gap: 12px;
+  column-gap: max(8px, 2%);
 }
 
 .contributor-card {
@@ -163,9 +165,20 @@ onMounted(() => {
   }
 }
 
-@media screen and (width <= 800px) {
+@media screen and (width <= 700px) {
   .contributors-wrap {
-    grid-template-columns: repeat(1, 1fr);
+    width: 100%;
+  }
+
+  .contributor-card {
+    width: 174px;
+    height: 102px;
+    padding: 16px;
+    padding-top: 24px;
+  }
+
+  .card-avatar {
+    display: none;
   }
 }