From 1ee2fecbc2267d827b9dc04a08d8ccafd23f56c2 Mon Sep 17 00:00:00 2001 From: Liyas Thomas Date: Sat, 3 Jul 2021 13:14:58 +0000 Subject: [PATCH] feat: refactor buttons --- .github/ISSUE_TEMPLATE/custom.md | 2 - assets/icons/chrome.svg | 1 + assets/icons/firefox.svg | 1 + assets/icons/github.svg | 1 + assets/icons/google.svg | 1 + assets/icons/twitter.svg | 1 + assets/scss/styles.scss | 294 ++++------------- assets/scss/themes.scss | 12 + components/app/Extensions.vue | 74 +---- components/app/Header.vue | 196 +++++------- components/app/Login.vue | 26 ++ components/app/Logo.vue | 43 ++- components/app/Section.vue | 62 +--- components/app/Shortcuts.vue | 4 +- components/app/Sidenav.vue | 2 +- components/collections/Add.vue | 12 +- components/collections/AddFolder.vue | 12 +- components/collections/Edit.vue | 12 +- components/collections/EditFolder.vue | 12 +- components/collections/EditRequest.vue | 12 +- components/collections/ImportExport.vue | 140 ++++---- components/collections/SaveRequest.vue | 12 +- components/collections/graphql/Add.vue | 12 +- components/collections/graphql/AddFolder.vue | 12 +- components/collections/graphql/Collection.vue | 78 ++--- components/collections/graphql/Edit.vue | 12 +- components/collections/graphql/EditFolder.vue | 12 +- .../collections/graphql/EditRequest.vue | 12 +- components/collections/graphql/Folder.vue | 72 ++--- .../collections/graphql/ImportExport.vue | 107 +++---- components/collections/graphql/Request.vue | 51 ++- components/collections/graphql/index.vue | 28 +- components/collections/index.vue | 49 ++- components/collections/my/Collection.vue | 88 +++--- components/collections/my/Folder.vue | 72 ++--- components/collections/my/Request.vue | 57 ++-- components/collections/teams/Collection.vue | 95 +++--- components/collections/teams/Folder.vue | 73 ++--- components/collections/teams/Request.vue | 51 ++- components/environments/Add.vue | 12 +- components/environments/Edit.vue | 39 +-- components/environments/Environment.vue | 32 +- components/environments/ImportExport.vue | 105 +++--- components/environments/index.vue | 24 +- components/firebase/Email.vue | 19 +- components/firebase/Login.vue | 158 ++++++++-- components/firebase/Logout.vue | 9 +- components/graphql/TypeLink.vue | 2 +- components/history/graphql/Card.vue | 72 ++--- components/history/index.vue | 76 ++--- components/history/rest/Card.vue | 64 ++-- components/http/BodyParameters.vue | 67 ++-- components/http/CodegenModal.vue | 21 +- components/http/Headers.vue | 53 ++-- components/http/ImportCurl.vue | 12 +- components/http/Parameters.vue | 53 ++-- components/http/RawBody.vue | 31 +- components/http/TokenList.vue | 34 +- components/landing/Hero.vue | 3 + .../lenses/renderers/HTMLLensRenderer.vue | 48 ++- .../lenses/renderers/ImageLensRenderer.vue | 10 +- .../lenses/renderers/JSONLensRenderer.vue | 34 +- .../lenses/renderers/RawLensRenderer.vue | 34 +- .../lenses/renderers/XMLLensRenderer.vue | 34 +- components/profile/Picture.vue | 58 ++++ components/realtime/Mqtt.vue | 59 ++-- components/realtime/Socketio.vue | 51 ++- components/realtime/Sse.vue | 19 +- components/realtime/Websocket.vue | 77 ++--- components/smart/AccentModePicker.vue | 25 +- components/smart/AceEditor.vue | 6 +- components/smart/Anchor.vue | 4 +- components/smart/AutoComplete.vue | 6 +- components/smart/ChangeLanguage.vue | 19 +- components/smart/ColorModePicker.vue | 28 +- components/smart/ConfirmModal.vue | 12 +- components/smart/DeletableChip.vue | 10 +- components/smart/HideMenu.vue | 2 +- components/smart/Icon.vue | 19 ++ components/smart/Item.vue | 93 ++++++ components/smart/Modal.vue | 83 ++--- components/smart/Spinner.vue | 34 ++ components/smart/Tabs.vue | 97 +++--- components/tab/Primary.vue | 84 +++++ components/tab/Secondary.vue | 91 ++++++ components/teams/Add.vue | 13 +- components/teams/Edit.vue | 80 ++--- components/teams/Team.vue | 59 ++-- components/teams/index.vue | 21 +- components/translate/Fade.vue | 4 +- components/translate/SlideRight.vue | 4 +- lang/en-US.json | 6 +- layouts/default.vue | 18 +- layouts/error.vue | 28 +- nuxt.config.js | 2 + package-lock.json | 69 ++++ package.json | 1 + pages/api.vue | 298 ++++++++---------- pages/doc.vue | 43 ++- pages/graphql.vue | 169 +++++----- pages/profile.vue | 4 +- pages/settings.vue | 89 +++--- windi.config.js | 2 + 103 files changed, 2150 insertions(+), 2496 deletions(-) create mode 100644 assets/icons/chrome.svg create mode 100644 assets/icons/firefox.svg create mode 100644 assets/icons/github.svg create mode 100644 assets/icons/google.svg create mode 100644 assets/icons/twitter.svg create mode 100644 components/app/Login.vue create mode 100644 components/profile/Picture.vue create mode 100644 components/smart/Icon.vue create mode 100644 components/smart/Item.vue create mode 100644 components/smart/Spinner.vue create mode 100644 components/tab/Primary.vue create mode 100644 components/tab/Secondary.vue diff --git a/.github/ISSUE_TEMPLATE/custom.md b/.github/ISSUE_TEMPLATE/custom.md index 48d5f81fa..b894315f4 100644 --- a/.github/ISSUE_TEMPLATE/custom.md +++ b/.github/ISSUE_TEMPLATE/custom.md @@ -6,5 +6,3 @@ labels: '' assignees: '' --- - - diff --git a/assets/icons/chrome.svg b/assets/icons/chrome.svg new file mode 100644 index 000000000..3f6445157 --- /dev/null +++ b/assets/icons/chrome.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/firefox.svg b/assets/icons/firefox.svg new file mode 100644 index 000000000..56f06bd84 --- /dev/null +++ b/assets/icons/firefox.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/github.svg b/assets/icons/github.svg new file mode 100644 index 000000000..18e9450e0 --- /dev/null +++ b/assets/icons/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/google.svg b/assets/icons/google.svg new file mode 100644 index 000000000..0642ef122 --- /dev/null +++ b/assets/icons/google.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/twitter.svg b/assets/icons/twitter.svg new file mode 100644 index 000000000..06e576275 --- /dev/null +++ b/assets/icons/twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss index d86420c4b..d2f9f6ad1 100644 --- a/assets/scss/styles.scss +++ b/assets/scss/styles.scss @@ -10,28 +10,34 @@ font-variant-ligatures: common-ligatures; } -::selection { - @apply bg-accent; - @apply text-primary; -} - -::-webkit-scrollbar { - @apply h-1; - @apply w-2; - - &:hover { - @apply bg-primaryDark; - } +::-webkit-scrollbar-track { + @apply bg-transparent; } ::-webkit-scrollbar-thumb { - @apply bg-secondaryLight; + @apply bg-divider; + @apply rounded-full; + @apply border-solid; + @apply border-4; + @apply border-transparent; + @apply bg-clip-content; &:hover { - @apply bg-secondary; + @apply bg-dividerDark; + @apply bg-clip-content; } } +::-webkit-scrollbar { + @apply w-4; + @apply h-4; +} + +::selection { + @apply bg-accent; + @apply text-primary; +} + ::placeholder { @apply text-secondaryLight; @apply opacity-25; @@ -44,6 +50,7 @@ html { body { @apply bg-primary; @apply text-secondary; + @apply text-sm; @apply font-medium; @apply select-none; @apply overflow-x-hidden; @@ -52,15 +59,11 @@ body { -webkit-touch-callout: none; } -body.sticky-footer footer { - @apply opacity-25; -} - .page-enter-active, .page-leave-active, .layout-enter-active, .layout-leave-active { - @apply transition; + @apply transition-opacity; } .page-enter, @@ -70,76 +73,41 @@ body.sticky-footer footer { @apply opacity-0; } +.material-icons { + font-size: 1.25rem; +} + +.svg-icons { + @apply inline-flex; + @apply flex-shrink-0; + @apply h-5; + @apply w-5; +} + a { @apply inline-flex; @apply text-current; @apply no-underline; @apply outline-none; + @apply focus-visible:ring; + @apply focus-visible:ring-inset; + @apply focus-visible:ring-accent; &.link { - @apply text-accent; - } -} - -footer { - & > div { - @apply flex; - @apply py-2 px-2; - @apply w-full; @apply items-center; - @apply justify-between; + @apply text-accent; + + @apply hover:text-accent; + @apply focus:text-accent; } } -.wrapper { - @apply min-h-screen; - @apply flex flex-col flex-nowrap; -} - -.wrapper .page { - min-height: calc(100vh - 153px); -} - -.content, -.columns, -.footer { - @apply flex flex-1; -} - -.sticky-inner { - @apply flex flex-col; - @apply items-start items-stretch; - @apply order-1; - @apply sticky; - @apply top-0; - @apply h-full; -} - -main { - @apply flex flex-col flex-1; - @apply order-2; - @apply relative; - @apply px-4; -} - -.heading { - @apply flex; - @apply items-center; - @apply m-0; - @apply font-bold; -} - -h3.heading { - @apply m-2; -} - -p { - @apply text-sm; -} - -hr { - @apply border-b border-dashed border-divider; - @apply my-4; +button { + @apply font-medium; + @apply outline-none; + @apply focus-visible:ring; + @apply focus-visible:ring-inset; + @apply focus-visible:ring-accent; } .tippy-popper { @@ -154,26 +122,26 @@ hr { } .popover-theme { - @apply bg-primaryLight; + @apply bg-primary; @apply text-secondary; @apply p-2; - @apply shadow-md; + @apply shadow-lg; } &[x-placement^="top"] .tippy-tooltip .tippy-arrow { - border-top-color: var(--primary-light-color); + border-top-color: var(--primary-color); } &[x-placement^="bottom"] .tippy-tooltip .tippy-arrow { - border-bottom-color: var(--primary-light-color); + border-bottom-color: var(--primary-color); } &[x-placement^="left"] .tippy-tooltip .tippy-arrow { - border-left-color: var(--primary-light-color); + border-left-color: var(--primary-color); } &[x-placement^="right"] .tippy-tooltip .tippy-arrow { - border-right-color: var(--primary-light-color); + border-right-color: var(--primary-color); } } @@ -185,6 +153,12 @@ hr { @apply items-stretch; } +.heading { + @apply font-bold; + @apply text-secondaryDark; + @apply text-lg; +} + .info:not(.toasted) { @apply m-4; @apply text-secondaryLight; @@ -195,96 +169,6 @@ hr { } } -.button { - @apply inline-flex; - @apply items-center; - @apply justify-center; - @apply p-4; - @apply bg-accent; - @apply text-primary; - @apply font-bold; - @apply fill-current; - @apply outline-none; - @apply border-none; - - span { - @apply inline-flex; - @apply ml-4; - @apply text-left; - } - - &:not([disabled]):hover, - &:not([disabled]):active, - &:not([disabled]):focus { - @apply text-primary; - @apply fill-current; - @apply outline-none; - - box-shadow: inset 0 0 0 2px var(--secondary-color); - } - - &.icon { - @apply bg-transparent; - @apply text-secondaryLight; - @apply fill-current; - @apply outline-none; - @apply border-none; - @apply rounded-lg; - - &:not([disabled]):hover, - &:not([disabled]):active, - &:not([disabled]):focus { - @apply text-secondary; - @apply fill-current; - @apply shadow-none; - } - } - - &.primary { - @apply text-accent; - @apply px-6; - - &:not([disabled]):hover, - &:not([disabled]):active, - &:not([disabled]):focus { - @apply bg-accent; - @apply text-primary; - } - } -} - -@keyframes beat { - 30% { - @apply transform; - @apply scale-90; - } - 50% { - @apply transform; - @apply scale-110; - } - 100% { - @apply transform; - @apply scale-100; - } -} - -.material-icons { - &:active { - animation: beat 0.5s forwards 1; - } -} - -fieldset:target, -section:target { - animation: highlight 2s ease; -} - -@keyframes highlight { - 50% { - box-shadow: 0 0 0 2px var(--accent-color); - } -} - input { @apply truncate; } @@ -295,64 +179,12 @@ input[type="radio"], @apply hidden; } -.show-on-large-screen { - @apply flex flex-1; -} - -.drop-down-input, -.url-field, -.input, -.select, -.textarea, -kbd, -code, -pre { - @apply flex; - @apply p-4; - @apply bg-primaryDark; - @apply text-secondary; - @apply font-mono; - @apply select-text; - @apply resize-y; - @apply outline-none; - @apply w-full; - - &:not([readonly]):not(.ace_editor):hover, - &:not([readonly]):not(.ace_editor):active, - &:not([readonly]):not(.ace_editor):focus { - box-shadow: inset 0 0 0 2px var(--secondary-light-color); - } -} - -.drop-down-input { - @apply cursor-pointer; - @apply rounded-none; - - min-width: 128px; - - &:hover, - &:active, - &:focus { - box-shadow: inset 0 0 0 2px var(--secondary-light-color); - } -} - -pre { - @apply grid; -} - pre.ace_editor { @apply font-mono; @apply z-0; @apply resize-none; } -kbd, -code, -pre { - @apply w-auto; -} - .select-wrapper { @apply relative; @apply w-full; @@ -439,12 +271,6 @@ input[type="checkbox"] { } } -label { - @apply p-4; - @apply text-secondaryLight; - @apply text-sm; -} - .row-wrapper { @apply flex flex-1 flex-row; @apply items-center; @@ -627,7 +453,3 @@ section { margin-left: 8px !important; } } - -.virtual-list { - @apply overflow-auto; -} diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss index 8cbfbd525..1347a0d9e 100644 --- a/assets/scss/themes.scss +++ b/assets/scss/themes.scss @@ -19,6 +19,10 @@ --secondary-dark-color: rgba(0, 0, 0, 0.5); // Border color --divider-color: rgba(255, 255, 255, 0.05); + // Light Border color + --divider-light-color: rgba(255, 255, 255, 0.05); + // Dark Border color + --divider-dark-color: rgba(255, 255, 255, 0.05); // Error color --error-color: rgba(255, 255, 255, 0.05); // Tooltip color @@ -42,6 +46,10 @@ --secondary-dark-color: theme("colors.gray.700"); // Border color --divider-color: theme("colors.gray.200"); + // Light Border color + --divider-light-color: theme("colors.gray.100"); + // Dark Border color + --divider-dark-color: theme("colors.gray.300"); // Error color --error-color: theme("colors.gray.700"); // Tooltip color @@ -65,6 +73,10 @@ --secondary-dark-color: rgba(9, 9, 9, 0.5); // Border color --divider-color: rgba(255, 255, 255, 0.11); + // Light Border color + --divider-light-color: rgba(255, 255, 255, 0.11); + // Dark Border color + --divider-dark-color: rgba(255, 255, 255, 0.11); // Error color --error-color: rgba(255, 255, 255, 0.05); // Tooltip color diff --git a/components/app/Extensions.vue b/components/app/Extensions.vue index d7904b2fa..e70ead0c9 100644 --- a/components/app/Extensions.vue +++ b/components/app/Extensions.vue @@ -3,9 +3,7 @@ diff --git a/components/app/Header.vue b/components/app/Header.vue index 5bf7def75..1d553d923 100644 --- a/components/app/Header.vue +++ b/components/app/Header.vue @@ -1,135 +1,90 @@ + + + + + + + + + + + + + diff --git a/components/app/Logo.vue b/components/app/Logo.vue index e6ff2796f..b4e968888 100644 --- a/components/app/Logo.vue +++ b/components/app/Logo.vue @@ -1,22 +1,35 @@ - + +@keyframes appear { + 0% { + @apply opacity-0; + } + 100% { + @apply opacity-100; + } +} + diff --git a/components/app/Section.vue b/components/app/Section.vue index 5e302addf..a9c197dd6 100644 --- a/components/app/Section.vue +++ b/components/app/Section.vue @@ -1,18 +1,7 @@ - - diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue index 3da103d1d..ba3c7df70 100644 --- a/components/app/Shortcuts.vue +++ b/components/app/Shortcuts.vue @@ -3,9 +3,7 @@