From b9da8c73c6bfa25eaad41c2ef700e0e96f12b368 Mon Sep 17 00:00:00 2001 From: Michael Peters Date: Thu, 30 Dec 2021 19:34:18 -0600 Subject: [PATCH] Move scss to its own directory structure rather than inline with components --- makefile | 2 +- .../elements-styles/components/buttons.scss | 51 ++++ .../components/file-drop-target.scss | 36 +++ .../components/input-dropdown.scss | 55 ++++ .../components/input-image-edit.scss | 35 +++ .../components/input-text.scss | 32 ++ .../components/invite-preview.scss | 29 ++ .../components/submit-overlay-lower.scss | 35 +++ .../contexts/components/context-menu.scss | 73 +++++ .../contexts/components/context.scss | 12 + .../lists}/channel-list.scss | 12 +- .../lists/components/channel-element.scss | 18 ++ .../lists/components/member-element.scss} | 8 +- .../lists/components/message-element.scss | 144 +++++++++ .../elements-styles/lists/guild-list.scss | 68 +++++ .../elements-styles/lists/member-list.scss | 23 ++ .../lists/message-list.scss | 8 +- .../overlays/components/overlay.scss} | 112 ++++--- .../overlays/overlay-add-guild.scss | 6 +- .../overlays/overlay-channel.scss | 2 +- .../overlays/overlay-error-message.scss | 10 +- .../overlays/overlay-guild-settings.scss | 12 +- .../overlays/overlay-image.scss | 8 +- .../overlays/overlay-personalize.scss | 4 +- src/client/webapp/elements-styles/root.scss | 2 + .../sections/channel-title.scss} | 19 +- .../sections/connection-info.scss} | 6 +- .../sections/guild-list-container.scss | 32 ++ .../elements-styles/sections/guild-title.scss | 20 ++ .../elements-styles/sections/guild.scss | 44 +++ .../sections}/guilds-manager.scss | 2 +- .../sections/send-message.scss | 105 +++++++ .../sections}/title-bar.scss | 10 +- .../elements/components/components.scss | 275 ------------------ .../elements/components/input-dropdown.tsx | 2 +- .../webapp/elements/lists/channel-list.scss | 0 .../lists/components/channel-element.scss | 18 -- .../lists/components/member-element.scss | 0 .../lists/components/message-element.scss | 144 --------- .../webapp/elements/lists/guild-list.scss | 0 src/client/webapp/elements/lists/lists.scss | 7 - .../webapp/elements/lists/member-list.scss | 33 --- .../webapp/elements/overlays/overlays.scss | 6 - src/client/webapp/index.html | 2 +- src/client/webapp/index.scss | 48 +++ src/client/webapp/styles/buttons.scss | 51 ---- src/client/webapp/styles/channel-feed.scss | 117 -------- src/client/webapp/styles/contexts.scss | 133 --------- src/client/webapp/styles/error-indicator.scss | 23 -- src/client/webapp/styles/fonts.scss | 10 +- src/client/webapp/styles/general.scss | 6 +- src/client/webapp/styles/guild-list.scss | 68 ----- src/client/webapp/styles/guild.scss | 32 -- src/client/webapp/styles/scrollbars.scss | 8 +- src/client/webapp/styles/shake.scss | 2 +- src/client/webapp/styles/status-circles.scss | 10 +- src/client/webapp/styles/styles.scss | 25 -- 57 files changed, 1005 insertions(+), 1050 deletions(-) create mode 100644 src/client/webapp/elements-styles/components/buttons.scss create mode 100644 src/client/webapp/elements-styles/components/file-drop-target.scss create mode 100644 src/client/webapp/elements-styles/components/input-dropdown.scss create mode 100644 src/client/webapp/elements-styles/components/input-image-edit.scss create mode 100644 src/client/webapp/elements-styles/components/input-text.scss create mode 100644 src/client/webapp/elements-styles/components/invite-preview.scss create mode 100644 src/client/webapp/elements-styles/components/submit-overlay-lower.scss create mode 100644 src/client/webapp/elements-styles/contexts/components/context-menu.scss create mode 100644 src/client/webapp/elements-styles/contexts/components/context.scss rename src/client/webapp/{styles => elements-styles/lists}/channel-list.scss (77%) create mode 100644 src/client/webapp/elements-styles/lists/components/channel-element.scss rename src/client/webapp/{styles/members.scss => elements-styles/lists/components/member-element.scss} (79%) create mode 100644 src/client/webapp/elements-styles/lists/components/message-element.scss create mode 100644 src/client/webapp/elements-styles/lists/guild-list.scss create mode 100644 src/client/webapp/elements-styles/lists/member-list.scss rename src/client/webapp/{elements => elements-styles}/lists/message-list.scss (84%) rename src/client/webapp/{styles/overlays.scss => elements-styles/overlays/components/overlay.scss} (50%) rename src/client/webapp/{elements => elements-styles}/overlays/overlay-add-guild.scss (67%) rename src/client/webapp/{elements => elements-styles}/overlays/overlay-channel.scss (88%) rename src/client/webapp/{elements => elements-styles}/overlays/overlay-error-message.scss (71%) rename src/client/webapp/{elements => elements-styles}/overlays/overlay-guild-settings.scss (86%) rename src/client/webapp/{elements => elements-styles}/overlays/overlay-image.scss (77%) rename src/client/webapp/{elements => elements-styles}/overlays/overlay-personalize.scss (69%) create mode 100644 src/client/webapp/elements-styles/root.scss rename src/client/webapp/{styles/channel.scss => elements-styles/sections/channel-title.scss} (65%) rename src/client/webapp/{styles/connection.scss => elements-styles/sections/connection-info.scss} (62%) create mode 100644 src/client/webapp/elements-styles/sections/guild-list-container.scss create mode 100644 src/client/webapp/elements-styles/sections/guild-title.scss create mode 100644 src/client/webapp/elements-styles/sections/guild.scss rename src/client/webapp/{styles => elements-styles/sections}/guilds-manager.scss (62%) create mode 100644 src/client/webapp/elements-styles/sections/send-message.scss rename src/client/webapp/{styles => elements-styles/sections}/title-bar.scss (75%) delete mode 100644 src/client/webapp/elements/components/components.scss delete mode 100644 src/client/webapp/elements/lists/channel-list.scss delete mode 100644 src/client/webapp/elements/lists/components/channel-element.scss delete mode 100644 src/client/webapp/elements/lists/components/member-element.scss delete mode 100644 src/client/webapp/elements/lists/components/message-element.scss delete mode 100644 src/client/webapp/elements/lists/guild-list.scss delete mode 100644 src/client/webapp/elements/lists/lists.scss delete mode 100644 src/client/webapp/elements/lists/member-list.scss delete mode 100644 src/client/webapp/elements/overlays/overlays.scss create mode 100644 src/client/webapp/index.scss delete mode 100644 src/client/webapp/styles/buttons.scss delete mode 100644 src/client/webapp/styles/channel-feed.scss delete mode 100644 src/client/webapp/styles/contexts.scss delete mode 100644 src/client/webapp/styles/error-indicator.scss delete mode 100644 src/client/webapp/styles/guild-list.scss delete mode 100644 src/client/webapp/styles/guild.scss delete mode 100644 src/client/webapp/styles/styles.scss diff --git a/makefile b/makefile index b9d80ae..e29965a 100644 --- a/makefile +++ b/makefile @@ -2,7 +2,7 @@ watch-tsc: ./node_modules/.bin/tsc --watch -p ./src/tsconfig.json watch-sass: - ./node_modules/.bin/sass --watch ./src/client/webapp/styles/styles.scss ./dist/client/webapp/styles/styles.css + ./node_modules/.bin/sass --watch ./src/client/webapp/index.scss ./dist/client/webapp/index.css lint-autofix: ./node_modules/.bin/eslint ./src --ext .js,.jsx,.ts,.tsx --fix diff --git a/src/client/webapp/elements-styles/components/buttons.scss b/src/client/webapp/elements-styles/components/buttons.scss new file mode 100644 index 0000000..2785df0 --- /dev/null +++ b/src/client/webapp/elements-styles/components/buttons.scss @@ -0,0 +1,51 @@ +@use "../../styles/theme.scss"; + +/* Buttons */ +.button { + display: inline-block; + background-color: theme.$brand; + color: theme.$header-primary; + cursor: pointer; + border-radius: 4px; + padding: 8px 24px; + + &:hover { + background-color: theme.$brand-hover; + } + + &.positive { + background-color: theme.$background-button-positive; + + &:hover { + background-color: theme.$background-button-positive-hover; + } + } + + &.negative { + background-color: theme.$background-button-negative; + + &:hover { + background-color: theme.$background-button-negative-hover; + } + } + + &.perdu { + background-color: theme.$background-button-perdu; + + &:hover { + background-color: theme.$background-button-perdu-hover; + } + } + + &.lower-submit { + padding: 8px 24px; + } + + &.display-popup { + padding: 6px 12px; + } + + &.table-icon { + padding: 4px; + } +} diff --git a/src/client/webapp/elements-styles/components/file-drop-target.scss b/src/client/webapp/elements-styles/components/file-drop-target.scss new file mode 100644 index 0000000..d174b0f --- /dev/null +++ b/src/client/webapp/elements-styles/components/file-drop-target.scss @@ -0,0 +1,36 @@ +@use "../../styles/theme.scss"; + +.file-drop { + position: fixed; + width: 100vw; + height: calc(100vh - 22px); + top: 22px; + left: 0; + display: flex; + justify-content: center; + align-items: center; + background-color: theme.$background-overlay; + + .panel { + // TODO: make this nicer + color: theme.$text-normal; + background-color: theme.$background-primary; + padding: 16px; + border-radius: 8px; + + display: flex; + align-items: center; + + img.drop-icon { + display: block; + height: 128px; + max-width: 128px; + margin-right: 16px; + } + + .drop-message { + font-size: 2em; + color: theme.$header-primary; + } + } +} diff --git a/src/client/webapp/elements-styles/components/input-dropdown.scss b/src/client/webapp/elements-styles/components/input-dropdown.scss new file mode 100644 index 0000000..dcc53d3 --- /dev/null +++ b/src/client/webapp/elements-styles/components/input-dropdown.scss @@ -0,0 +1,55 @@ +@use "../../styles/theme.scss"; + +.dropdown-react { + position: relative; + display: inline-block; + + .label { + font-size: 0.75em; + font-weight: bold; + color: theme.$interactive-normal; + text-transform: uppercase; + margin-bottom: 2px; + } + + .display-content { + background-color: theme.$background-input; + color: theme.$text-normal; + padding: 8px; + border-radius: 3px; + cursor: pointer; + + border: 1px solid theme.$border-input; + } + + &:hover .display { + border-color: theme.$border-input-hover; + } + + &:focus .display { + border-color: theme.$border-input-focus; + } + + .options { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 0; + cursor: pointer; + + &:not(.open) { + display: none; + } + + .option { + padding: 8px; + color: theme.$text-normal; + background-color: theme.$background-dropdown-option; + + &:hover { + background-color: theme.$background-dropdown-option-hover; + } + } + } +} diff --git a/src/client/webapp/elements-styles/components/input-image-edit.scss b/src/client/webapp/elements-styles/components/input-image-edit.scss new file mode 100644 index 0000000..a01290c --- /dev/null +++ b/src/client/webapp/elements-styles/components/input-image-edit.scss @@ -0,0 +1,35 @@ +@use "../../styles/theme.scss"; + +.image-edit-input-react { + position: relative; + + label { + cursor: pointer; + } + + img.value { + width: 64px; + height: 64px; + border-radius: 8px; + display: block; + } + + .modify { + position: absolute; + background-color: theme.$brand; + padding: 6px; + border-radius: 16px; + right: -4px; + bottom: -4px; + + img.pencil { + display: block; + width: 10px; + height: 10px; + } + } + + input { + display: none; + } +} diff --git a/src/client/webapp/elements-styles/components/input-text.scss b/src/client/webapp/elements-styles/components/input-text.scss new file mode 100644 index 0000000..00fb22b --- /dev/null +++ b/src/client/webapp/elements-styles/components/input-text.scss @@ -0,0 +1,32 @@ +@use "../../styles/theme.scss"; + +.text-input-react { + .label { + font-size: 0.75em; + font-weight: bold; + color: theme.$interactive-normal; + text-transform: uppercase; + margin-bottom: 2px; + } + + input { + font-size: inherit; + font-family: inherit; + color: theme.$text-normal; + background-color: theme.$background-input; + border: 1px solid theme.$border-input; + border-radius: 3px; + max-height: 100px; + overflow-y: scroll; + padding: 8px; + + &:hover { + border-color: theme.$border-input-hover; + } + + &:focus { + outline: none; + border-color: theme.$border-input-focus; + } + } +} diff --git a/src/client/webapp/elements-styles/components/invite-preview.scss b/src/client/webapp/elements-styles/components/invite-preview.scss new file mode 100644 index 0000000..86ac1db --- /dev/null +++ b/src/client/webapp/elements-styles/components/invite-preview.scss @@ -0,0 +1,29 @@ +@use "../../styles/theme.scss"; + +.guild-preview { + display: flex; + align-items: center; + + .icon { + width: 64px; + height: 64px; + margin-right: 16px; + border-radius: 8px; + } + + .name { + color: theme.$header-primary; + font-size: 1.25em; + font-weight: 600; + } + + .url { + color: theme.$text-normal; + } + + .expires { + color: theme.$text-muted; + font-size: 12px; + font-weight: 600; + } +} diff --git a/src/client/webapp/elements-styles/components/submit-overlay-lower.scss b/src/client/webapp/elements-styles/components/submit-overlay-lower.scss new file mode 100644 index 0000000..9b1d153 --- /dev/null +++ b/src/client/webapp/elements-styles/components/submit-overlay-lower.scss @@ -0,0 +1,35 @@ +@use "../../styles/theme.scss"; + +.lower-react { + .error-container { + background-color: theme.$background-secondary-alt; + overflow-y: hidden; + max-height: 0; + transition: max-height 0.2s ease-in-out; + + &:not(.empty) { + max-height: 48px; + } + + .error { + font-size: 16px; + line-height: 1; + padding: 16px 16px; + height: 16px; + color: theme.$text-normal; + + &::first-letter { + text-transform: uppercase; + } + } + } + + .buttons { + padding: 16px; + display: flex; + justify-content: flex-end; + background-color: theme.$background-tertiary; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + } +} diff --git a/src/client/webapp/elements-styles/contexts/components/context-menu.scss b/src/client/webapp/elements-styles/contexts/components/context-menu.scss new file mode 100644 index 0000000..6298073 --- /dev/null +++ b/src/client/webapp/elements-styles/contexts/components/context-menu.scss @@ -0,0 +1,73 @@ +@use "../../../styles/theme.scss"; + +.context .menu { + min-width: 180px; + box-sizing: border-box; + font-size: 14px; + background-color: theme.$background-floating; + color: theme.$text-normal; + padding: 8px; + border-radius: 4px; + + .item-spacer { + background-color: theme.$background-secondary; + height: 1px; + margin: 6px 0; + } + + .item { + padding: 8px; + border-radius: 2px; + cursor: pointer; + display: flex; + align-items: center; + } + + .item:hover { + color: theme.$header-primary; + background-color: theme.$brand-hover; + } + + .item.red { + color: theme.$item-red; + font-weight: 600; + } + + .item.red:hover { + color: theme.$header-primary; + background-color: theme.$item-red; + } + + .item .icon { + margin-right: 8px; + } + + .guild-title-context-menu .item .icon img, + .guild-title-context-menu .item .icon svg { + width: 16px; + height: 16px; + } + + .member-context .item { + display: flex; + align-items: center; + line-height: 1; + } + + .member-context .item .icon img, + .member-context .item .icon svg { + width: 10px; + height: 10px; + } + + .member-context .item .status-circle { + width: 10px; + height: 10px; + border-radius: 5px; + margin-right: 8px; + } + + .member-context .item .status-text { + text-transform: capitalize; + } +} \ No newline at end of file diff --git a/src/client/webapp/elements-styles/contexts/components/context.scss b/src/client/webapp/elements-styles/contexts/components/context.scss new file mode 100644 index 0000000..808e79f --- /dev/null +++ b/src/client/webapp/elements-styles/contexts/components/context.scss @@ -0,0 +1,12 @@ +@use "../../../styles/theme.scss"; + +.context { + position: fixed; + z-index: 1; + + // Since useEffect gets called after the element is rendered, hide it until + // it gets aligned + &.react:not(.aligned) { + visibility: hidden; + } +} \ No newline at end of file diff --git a/src/client/webapp/styles/channel-list.scss b/src/client/webapp/elements-styles/lists/channel-list.scss similarity index 77% rename from src/client/webapp/styles/channel-list.scss rename to src/client/webapp/elements-styles/lists/channel-list.scss index 6b17071..53a41ca 100644 --- a/src/client/webapp/styles/channel-list.scss +++ b/src/client/webapp/elements-styles/lists/channel-list.scss @@ -1,4 +1,4 @@ -@import "theme.scss"; +@use "../../styles/theme.scss"; .channel-list { box-sizing: border-box; @@ -7,17 +7,17 @@ height: calc(100vh - 71px - 51px); /* May be nice to figure out a way to do this without fixed heights */ .channel.active { - color: $interactive-active; - background-color: $background-modifier-selected; + color: theme.$interactive-active; + background-color: theme.$background-modifier-selected; } .channel:not(.active):hover { - color: $interactive-hover; - background-color: $background-modifier-hover; + color: theme.$interactive-hover; + background-color: theme.$background-modifier-hover; } .channel { - color: $channels-default; + color: theme.$channels-default; margin: 0 0 2px 8px; padding: 0 8px; height: 32px; diff --git a/src/client/webapp/elements-styles/lists/components/channel-element.scss b/src/client/webapp/elements-styles/lists/components/channel-element.scss new file mode 100644 index 0000000..6dbd364 --- /dev/null +++ b/src/client/webapp/elements-styles/lists/components/channel-element.scss @@ -0,0 +1,18 @@ +@use "../../../styles/theme.scss"; + +.channel .channel-gear-hover { + display: flex; + align-items: center; + line-height: 1; + + .tab { + color: theme.$background-floating; // svg + } + + .text { + color: theme.$text-normal; + background-color: theme.$background-floating; + padding: 8px; + border-radius: 4px; + } +} diff --git a/src/client/webapp/styles/members.scss b/src/client/webapp/elements-styles/lists/components/member-element.scss similarity index 79% rename from src/client/webapp/styles/members.scss rename to src/client/webapp/elements-styles/lists/components/member-element.scss index 59d5198..435e3a7 100644 --- a/src/client/webapp/styles/members.scss +++ b/src/client/webapp/elements-styles/lists/components/member-element.scss @@ -1,4 +1,4 @@ -@import "theme.scss"; +@use "../../../styles/theme.scss"; /* Member */ @@ -7,7 +7,7 @@ align-items: center; box-sizing: border-box; - /* members are used in the member list and the connection information */ + /* Note: This member class is used in the member list and the connection information */ .icon { position: relative; @@ -33,7 +33,7 @@ /* see specific cases for width */ .name { - color: $header-primary; + color: theme.$header-primary; margin-bottom: 2px; overflow: hidden; white-space: nowrap; @@ -45,6 +45,6 @@ font-weight: 500; line-height: 1; text-transform: capitalize; - color: $channels-default; + color: theme.$channels-default; } } diff --git a/src/client/webapp/elements-styles/lists/components/message-element.scss b/src/client/webapp/elements-styles/lists/components/message-element.scss new file mode 100644 index 0000000..4d73646 --- /dev/null +++ b/src/client/webapp/elements-styles/lists/components/message-element.scss @@ -0,0 +1,144 @@ +@use "../../../styles/theme.scss"; + +.message-react { + display: flex; + padding: 4px 16px; + + &.continued { + margin-top: -4px; + + .timestamp { + flex: none; /* >:| NOT GONNA SHRINK BOI */ + margin: 0; + width: 40px; + visibility: hidden; + } + + &:hover .timestamp { + visibility: visible; + } + } + + .member-avatar img { + width: 40px; + height: 40px; + border-radius: 20px; + cursor: pointer; + user-select: none; + } + + .right { + flex: 1; + display: flex; + flex-flow: column; + align-items: flex-start; + margin-left: 16px; /* putting the margin here rather than on the avatar makes selecting better */ + user-select: text; + } + + .header { + display: flex; + align-items: baseline; + } + + .member-name { + font-size: 16px; + line-height: 22px; + font-weight: 500; + color: theme.$header-primary; + cursor: pointer; + white-space: nowrap; + } + + .member-name:hover { + text-decoration: underline; + } + + .timestamp { + font-size: 12px; + line-height: 22px; + font-weight: 500; + color: theme.$text-muted; + margin-left: 4px; + white-space: nowrap; + } + + .content { + font-size: 16px; + color: theme.$text-normal; + overflow-wrap: anywhere; + + &.text { + white-space: pre-wrap; + + .bold { + font-weight: 600; + color: theme.$header-primary; /* a bit brighter for some more emphasis */ + } + + .underline { + text-decoration: underline; + } + + .italic { + font-style: italic; + } + } + + &.image { + /* Center the loading icon */ + display: flex; + justify-content: center; + align-items: center; + border-radius: 8px; + background-color: theme.$background-secondary-alt; + cursor: pointer; + overflow: hidden; + + img { + max-width: 400px; + max-height: 300px; + border-radius: 8px; + } + } + + /* TODO: ellipse the overflow */ + &.resource { + min-width: 300px; + max-width: 400px; + display: flex; + align-items: center; + background-color: theme.$background-secondary-alt; + padding: 8px 12px; + border-radius: 8px; + cursor: pointer; + + &:hover .download-status { + text-decoration: underline; + } + + > :not(:last-child) { + margin-right: 12px; + } + + .icon { + max-width: 32px; + height: 32px; + -webkit-user-select: none; + user-select: none; + } + + .filename { + color: theme.$text-link; + } + + .download-status { + font-size: 12px; + font-weight: 500; + color: theme.$text-muted; + -webkit-user-select: none; + user-select: none; + } + } + } +} diff --git a/src/client/webapp/elements-styles/lists/guild-list.scss b/src/client/webapp/elements-styles/lists/guild-list.scss new file mode 100644 index 0000000..3de936e --- /dev/null +++ b/src/client/webapp/elements-styles/lists/guild-list.scss @@ -0,0 +1,68 @@ +@use "../../styles/theme.scss"; + +.guild-list-container { + display: flex; + flex-flow: column; + overflow-y: scroll; + box-sizing: border-box; + flex: none; /* >:| NOT GONNA SHINK BOI */ + width: 72px; /* TODO: auto-calculated from content */ + height: calc(100vh - 22px); + padding-top: 8px; + overflow-y: scroll; + + .guild-list { + display: flex; + flex-flow: column; + } + + .guild-listguild-list::-webkit-scrollbar { + display: none; + } + + .add-guild, + .guild-list .guild { + cursor: pointer; + margin-bottom: 8px; + display: flex; + align-items: center; + } + + .add-guild .pill, + .guild-list .guild .pill { + background-color: theme.$header-primary; + width: 8px; + height: 0; + border-radius: 4px 4px; + margin-left: -4px; + margin-right: 8px; + transition: height .1s ease-in-out; + } + + .guild-list .guild.active .pill { + height: 40px; + } + + .guild-list .guild.unread:not(.active) .pill { + height: 8px; + } + + .add-guild:hover .pill, + .guild-list .guild:not(.active):hover .pill { + height: 20px; + } + + .add-guild img, + .guild-list .guild img { + width: 48px; + height: 48px; + border-radius: 24px; + transition: border-radius .1s ease-in-out; + } + + .add-guild:hover img, + .guild-list .guild:hover img, + .guild-list .guild.active img { + border-radius: 16px; + } +} diff --git a/src/client/webapp/elements-styles/lists/member-list.scss b/src/client/webapp/elements-styles/lists/member-list.scss new file mode 100644 index 0000000..f84159e --- /dev/null +++ b/src/client/webapp/elements-styles/lists/member-list.scss @@ -0,0 +1,23 @@ +@use "../../styles/theme.scss"; + +.member-list { + .member { + background-color: theme.$background-secondary; + padding: 4px 8px; + margin-bottom: 4px; + border-radius: 4px; + } + + .member .name { + width: calc(208px - 40px); + } + + .member .status-circle { + border-color: theme.$background-secondary; + } + + .member:hover { + background-color: theme.$background-modifier-hover; + cursor: pointer; + } +} diff --git a/src/client/webapp/elements/lists/message-list.scss b/src/client/webapp/elements-styles/lists/message-list.scss similarity index 84% rename from src/client/webapp/elements/lists/message-list.scss rename to src/client/webapp/elements-styles/lists/message-list.scss index d169805..751a42a 100644 --- a/src/client/webapp/elements/lists/message-list.scss +++ b/src/client/webapp/elements-styles/lists/message-list.scss @@ -1,4 +1,4 @@ -@import "../../styles/theme.scss"; +@use "../../styles/theme.scss"; $scrollbarBottom: 4px; $borderRadius: 8px; @@ -27,21 +27,21 @@ $borderRadius: 8px; .line { flex: 1; height: 1; - background-color: $background-modifier-accent; + background-color: theme.$background-modifier-accent; } .date { font-size: 12px; line-height: 13px; font-weight: 600; - color: $text-muted; + color: theme.$text-muted; padding: 2px 4px; margin: 0 8px; } } &:hover { - background-color: $background-message-hover; + background-color: theme.$background-message-hover; } } } diff --git a/src/client/webapp/styles/overlays.scss b/src/client/webapp/elements-styles/overlays/components/overlay.scss similarity index 50% rename from src/client/webapp/styles/overlays.scss rename to src/client/webapp/elements-styles/overlays/components/overlay.scss index 08d0c27..a154eb0 100644 --- a/src/client/webapp/styles/overlays.scss +++ b/src/client/webapp/elements-styles/overlays/components/overlay.scss @@ -1,6 +1,4 @@ -@import "theme.scss"; - -/* Popup Image Overlay */ +@use "../../../styles/theme.scss"; body > .overlay, .react-overlays > .overlay { @@ -13,34 +11,12 @@ body > .overlay, display: flex; justify-content: center; align-items: center; - background-color: $background-overlay; - - /* General Controls */ - .text-input { - font-size: inherit; - font-family: inherit; - color: $text-normal; - background-color: $background-input; - border: 1px solid $border-input; - border-radius: 3px; - max-height: 100px; - overflow-y: scroll; - padding: 8px; - - &:hover { - border-color: $border-input-hover; - } - - &:focus { - outline: none; - border-color: $border-input-focus; - } - } + background-color: theme.$background-overlay; /* General Submit Dialog Overlays */ > .content.submit-dialog { - background-color: $background-primary; + background-color: theme.$background-primary; border-radius: 8px; .image-input { @@ -51,8 +27,8 @@ body > .overlay, .text-input { margin: 16px; - color: $text-normal; - background-color: $channeltextarea-background; + color: theme.$text-normal; + background-color: theme.$channeltextarea-background; border-radius: 8px; max-height: 100px; overflow-y: scroll; @@ -70,11 +46,11 @@ body > .overlay, display: flex; justify-content: space-between; align-items: center; - background-color: $background-tertiary; + background-color: theme.$background-tertiary; } .error { - color: $text-normal; + color: theme.$text-normal; } .buttons { @@ -92,7 +68,7 @@ body > .overlay, > .choices-react { box-sizing: border-box; - background-color: $background-secondary; + background-color: theme.$background-secondary; width: 226px; padding: 32px 16px; border-top-left-radius: $content-border-radius; @@ -101,39 +77,95 @@ body > .overlay, > .title { font-size: 0.75em; font-weight: bold; - color: $interactive-normal; + color: theme.$interactive-normal; text-transform: uppercase; padding: 3px 12px; margin-bottom: 4px; } > .choice { - color: $interactive-normal; + color: theme.$interactive-normal; cursor: pointer; padding: 6px 12px; border-radius: 3px; margin-bottom: 4px; &.selected { - color: $interactive-active; - background-color: $background-modifier-selected + color: theme.$interactive-active; + background-color: theme.$background-modifier-selected } &:not(.selected):hover { - color: $interactive-hover; - background-color: $background-modifier-hover; + color: theme.$interactive-hover; + background-color: theme.$background-modifier-hover; } } } .display { + $content-border-radius: 4px; + + flex: 1; + border-top-right-radius: $content-border-radius; + border-bottom-right-radius: $content-border-radius; + background-color: theme.$background-primary; + overflow-y: scroll; + position: relative; + .title { font-weight: 600; - color: $text-normal; + color: theme.$text-normal; font-size: 1.1em; line-height: 1; margin-bottom: 16px; } + + > .scroll { + margin: 32px; + + .divider { + margin: 16px 0; + height: 1px; + background-color: theme.$background-primary-divider; + } + } + + > .popup { + position: absolute; + bottom: 0; + left: 0; + box-sizing: border-box; + width: 100%; + + .content { + margin: 16px; + padding: 12px 12px 12px 16px; + display: flex; + justify-content: space-between; + align-items: center; + color: theme.$interactive-active; + background-color: theme.$background-popup-message; + border-radius: 8px; + } + + .tip { + font-weight: 500; + } + + .actions { + display: flex; + + .button { + padding: 8px 12px; + font-size: 0.85em; + font-weight: bold; + } + + :not(:last-child) { + margin-right: 4px; + } + } + } } } -} \ No newline at end of file +} diff --git a/src/client/webapp/elements/overlays/overlay-add-guild.scss b/src/client/webapp/elements-styles/overlays/overlay-add-guild.scss similarity index 67% rename from src/client/webapp/elements/overlays/overlay-add-guild.scss rename to src/client/webapp/elements-styles/overlays/overlay-add-guild.scss index 3ef9896..9c4cd83 100644 --- a/src/client/webapp/elements/overlays/overlay-add-guild.scss +++ b/src/client/webapp/elements-styles/overlays/overlay-add-guild.scss @@ -1,14 +1,14 @@ -@import "../../styles/theme.scss"; +@use "../../styles/theme.scss"; .react-overlays > .overlay > .content.add-guild { min-width: 350px; - background-color: $background-primary; + background-color: theme.$background-primary; border-radius: 8px; .divider { margin: 16px; height: 1px; - background-color: $background-primary-divider; + background-color: theme.$background-primary-divider; } .guild-preview { diff --git a/src/client/webapp/elements/overlays/overlay-channel.scss b/src/client/webapp/elements-styles/overlays/overlay-channel.scss similarity index 88% rename from src/client/webapp/elements/overlays/overlay-channel.scss rename to src/client/webapp/elements-styles/overlays/overlay-channel.scss index fcf38cf..79c4d9c 100644 --- a/src/client/webapp/elements/overlays/overlay-channel.scss +++ b/src/client/webapp/elements-styles/overlays/overlay-channel.scss @@ -1,4 +1,4 @@ -@import "../../styles/theme.scss"; +@use "../../styles/theme.scss"; .react-overlays > .overlay > .content.modify-channel { min-width: 350px; diff --git a/src/client/webapp/elements/overlays/overlay-error-message.scss b/src/client/webapp/elements-styles/overlays/overlay-error-message.scss similarity index 71% rename from src/client/webapp/elements/overlays/overlay-error-message.scss rename to src/client/webapp/elements-styles/overlays/overlay-error-message.scss index 32fd289..7ddaa75 100644 --- a/src/client/webapp/elements/overlays/overlay-error-message.scss +++ b/src/client/webapp/elements-styles/overlays/overlay-error-message.scss @@ -1,7 +1,7 @@ -@import "../../styles/theme.scss"; +@use "../../styles/theme.scss"; .react-overlays > .overlay > .content.error-message { - background-color: $background-secondary; + background-color: theme.$background-secondary; padding: 16px; border-radius: 8px; align-items: center; @@ -17,7 +17,7 @@ margin-left: 16px; .title { - color: $header-primary; + color: theme.$header-primary; font-size: 1.2em; font-weight: 600; line-height: 1; @@ -26,7 +26,7 @@ .message { padding: 0; - color: $text-normal; + color: theme.$text-normal; } } -} +} \ No newline at end of file diff --git a/src/client/webapp/elements/overlays/overlay-guild-settings.scss b/src/client/webapp/elements-styles/overlays/overlay-guild-settings.scss similarity index 86% rename from src/client/webapp/elements/overlays/overlay-guild-settings.scss rename to src/client/webapp/elements-styles/overlays/overlay-guild-settings.scss index 3c57821..2357d79 100644 --- a/src/client/webapp/elements/overlays/overlay-guild-settings.scss +++ b/src/client/webapp/elements-styles/overlays/overlay-guild-settings.scss @@ -1,4 +1,4 @@ -@import "../../styles/theme.scss"; +@use "../../styles/theme.scss"; .react-overlays > .overlay > .content.display-swapper.guild-settings { min-width: 350px; @@ -13,7 +13,7 @@ } .guild-name.text-input { - color: $header-primary; + color: theme.$header-primary; font-weight: 500; width: 150px; } @@ -37,20 +37,20 @@ } .view-invites { - color: $text-normal; + color: theme.$text-normal; .invites-table { .token-row { display: flex; align-items: center; line-height: 1; - background-color: $background-secondary; + background-color: theme.$background-secondary; padding: 8px; margin: 0 -8px; border-radius: 4px; &:hover { - background-color: $background-secondary-alt; + background-color: theme.$background-secondary-alt; } &:not(:last-child) { @@ -68,7 +68,7 @@ .token { font-family: 'Courier New', Courier, monospace; font-size: 0.85em; - color: $text-muted; + color: theme.$text-muted; } } diff --git a/src/client/webapp/elements/overlays/overlay-image.scss b/src/client/webapp/elements-styles/overlays/overlay-image.scss similarity index 77% rename from src/client/webapp/elements/overlays/overlay-image.scss rename to src/client/webapp/elements-styles/overlays/overlay-image.scss index 24509f9..5b293ba 100644 --- a/src/client/webapp/elements/overlays/overlay-image.scss +++ b/src/client/webapp/elements-styles/overlays/overlay-image.scss @@ -1,4 +1,4 @@ -@import "../../styles/theme.scss"; +@use "../../styles/theme.scss"; .react-overlays > .overlay > .content.popup-image { display: flex; @@ -11,7 +11,7 @@ } .download { - background-color: $background-primary; + background-color: theme.$background-primary; border-radius: 8px; padding: 8px; display: flex; @@ -26,12 +26,12 @@ .download .info .name { font-weight: 600; - color: $text-normal; + color: theme.$text-normal; } .download .info .size { font-size: 12px; font-weight: 500; - color: $text-sending; + color: theme.$text-sending; } } diff --git a/src/client/webapp/elements/overlays/overlay-personalize.scss b/src/client/webapp/elements-styles/overlays/overlay-personalize.scss similarity index 69% rename from src/client/webapp/elements/overlays/overlay-personalize.scss rename to src/client/webapp/elements-styles/overlays/overlay-personalize.scss index 55faded..16976bc 100644 --- a/src/client/webapp/elements/overlays/overlay-personalize.scss +++ b/src/client/webapp/elements-styles/overlays/overlay-personalize.scss @@ -1,7 +1,7 @@ -@import "../../styles/theme.scss"; +@use "../../styles/theme.scss"; .react-overlays > .overlay > .content.personalize { - background-color: $background-primary; + background-color: theme.$background-primary; border-radius: 8px; .personalization { diff --git a/src/client/webapp/elements-styles/root.scss b/src/client/webapp/elements-styles/root.scss new file mode 100644 index 0000000..1d5a9e6 --- /dev/null +++ b/src/client/webapp/elements-styles/root.scss @@ -0,0 +1,2 @@ +@use "../styles/theme.scss"; + diff --git a/src/client/webapp/styles/channel.scss b/src/client/webapp/elements-styles/sections/channel-title.scss similarity index 65% rename from src/client/webapp/styles/channel.scss rename to src/client/webapp/elements-styles/sections/channel-title.scss index bd1bb1c..c866f52 100644 --- a/src/client/webapp/styles/channel.scss +++ b/src/client/webapp/elements-styles/sections/channel-title.scss @@ -1,11 +1,4 @@ -@import "theme.scss"; - -.guild-channel { - flex: 1; - background-color: $background-primary; - display: flex; - flex-direction: column; -} +@use "../../styles/theme.scss"; // .channel-title is also used in the channel overlay @@ -17,9 +10,9 @@ height: 48px; display: flex; align-items: center; - color: $header-primary; - background-color: $background-primary; /* Different from discrod */ - border-bottom: 1px solid $background-secondary-alt; + color: theme.$header-primary; + background-color: theme.$background-primary; /* Different from discrod */ + border-bottom: 1px solid theme.$background-secondary-alt; .channel-icon { margin: 0 8px; @@ -36,7 +29,7 @@ width: 1px; height: 24px; margin: 0 16px; - background-color: $background-modifier-accent; + background-color: theme.$background-modifier-accent; } .channel-flavor-text { @@ -44,7 +37,7 @@ line-height: 18px; font-weight: 500; padding-right: 16px; - color: $header-secondary; + color: theme.$header-secondary; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; diff --git a/src/client/webapp/styles/connection.scss b/src/client/webapp/elements-styles/sections/connection-info.scss similarity index 62% rename from src/client/webapp/styles/connection.scss rename to src/client/webapp/elements-styles/sections/connection-info.scss index f9b4441..2d7bcb8 100644 --- a/src/client/webapp/styles/connection.scss +++ b/src/client/webapp/elements-styles/sections/connection-info.scss @@ -1,7 +1,7 @@ -@import "theme.scss"; +@use "../../styles/theme.scss"; .connection-info { - background-color: $background-secondary-alt; + background-color: theme.$background-secondary-alt; padding: 8px; cursor: pointer; /* clicking on this brings up the select-status context menu */ @@ -11,6 +11,6 @@ } .status-circle { - border-color: $background-secondary-alt; + border-color: theme.$background-secondary-alt; } } diff --git a/src/client/webapp/elements-styles/sections/guild-list-container.scss b/src/client/webapp/elements-styles/sections/guild-list-container.scss new file mode 100644 index 0000000..0a38fcc --- /dev/null +++ b/src/client/webapp/elements-styles/sections/guild-list-container.scss @@ -0,0 +1,32 @@ +@use "../../styles/theme.scss"; + +.context .add-guild-hover, +.guild-hover { + display: flex; + align-items: center; + color: theme.$background-floating; /* for the tab */ + + .info { + background-color: theme.$background-floating; + color: theme.$header-primary; + padding: 12px; + border-radius: 4px; + line-height: 1; + + > :not(:last-child) { + margin-bottom: 4px; + } + + .connection { + display: flex; + align-items: center; + } + + .connection .status-circle { + width: 10px; + height: 10px; + border-radius: 5px; + margin-right: 4px; + } + } +} diff --git a/src/client/webapp/elements-styles/sections/guild-title.scss b/src/client/webapp/elements-styles/sections/guild-title.scss new file mode 100644 index 0000000..2ecec03 --- /dev/null +++ b/src/client/webapp/elements-styles/sections/guild-title.scss @@ -0,0 +1,20 @@ +@use "../../styles/theme.scss"; + +.guild-title { + .guild-name-container { + padding: 0 16px; + height: 48px; + font-weight: 600; + display: flex; + align-items: center; + color: theme.$header-primary; + border-bottom: 1px solid theme.$background-secondary-alt; + + .guild-name { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } +} \ No newline at end of file diff --git a/src/client/webapp/elements-styles/sections/guild.scss b/src/client/webapp/elements-styles/sections/guild.scss new file mode 100644 index 0000000..747d814 --- /dev/null +++ b/src/client/webapp/elements-styles/sections/guild.scss @@ -0,0 +1,44 @@ +@use "../../styles/theme.scss"; + +.guild-react { + flex: 1; + display: flex; + + .guild-sidebar { + flex: none; /* >:| NOT GONNA SHINK BOI */ + width: 240px; + display: flex; + flex-direction: column; + background-color: theme.$background-secondary; + border-top-left-radius: 8px; + } + + .guild-channel { + flex: 1; + background-color: theme.$background-primary; + display: flex; + flex-direction: column; + + .guild-channel-content { + flex: 1; + display: flex; + + .guild-channel-feed-wrapper { + flex: 1; + width: 0; + display: flex; + flex-direction: column; + } + + .member-list-wrapper { + box-sizing: border-box; + flex: none; /* >:| NOT GONNA SHINK BOI */ + background-color: theme.$background-secondary; + width: 240px; + height: calc(100vh - 71px); + overflow-y: scroll; + padding: 8px 0 8px 8px; + } + } + } +} \ No newline at end of file diff --git a/src/client/webapp/styles/guilds-manager.scss b/src/client/webapp/elements-styles/sections/guilds-manager.scss similarity index 62% rename from src/client/webapp/styles/guilds-manager.scss rename to src/client/webapp/elements-styles/sections/guilds-manager.scss index cb09876..e5c8d14 100644 --- a/src/client/webapp/styles/guilds-manager.scss +++ b/src/client/webapp/elements-styles/sections/guilds-manager.scss @@ -1,4 +1,4 @@ -@import "theme.scss"; +@use "../../styles/theme.scss"; .guilds-manager { flex: 1; diff --git a/src/client/webapp/elements-styles/sections/send-message.scss b/src/client/webapp/elements-styles/sections/send-message.scss new file mode 100644 index 0000000..76d2d26 --- /dev/null +++ b/src/client/webapp/elements-styles/sections/send-message.scss @@ -0,0 +1,105 @@ +@use "../../styles/theme.scss"; + +$scrollbarBottom: 4px; +$borderRadius: 8px; + +.send-message-input-wrapper { + position: relative; + height: 0; + + .send-message-input { + position: absolute; + left: 0; + bottom: 0; + margin: 0 16px 16px 16px; + box-sizing: border-box; + width: calc(100% - 32px); + + display: flex; + flex-flow: column; + align-items: flex-start; + + color: theme.$text-normal; + background-color: theme.$channeltextarea-background; + border-radius: $borderRadius; + + .attachment-preview { + position: relative; + margin: 16px 16px 0 16px; + padding: 8px; + border-radius: 8px; + box-sizing: border-box; + max-width: calc(100% - 32px); + background-color: theme.$background-secondary; + + img.preview { + max-width: 128px; + max-height: 128px; + border-radius: 4px; + object-fit: contain; + } + + .name { + line-height: 1; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + .remove { + position: absolute; + right: -8px; + top: -8px; + border-radius: 8px; + cursor: pointer; + color: theme.$background-button-negative; + + &:hover { + color: theme.$background-button-negative-hover; + } + + svg { + width: 20px; + height: 20px; + } + } + } + + .divider { + box-sizing: border-box; + width: 100%; + margin: 16px 0 0 0; + height: 1px; + background-color: theme.$interactive-muted; + } + + .send-message-input-row { + width: 100%; + display: flex; + align-items: flex-start; + + .attachment-input-button { + cursor: pointer; + margin: 12px; + + svg { + width: 24px; + height: 24px; + } + } + + .text-input { + flex: 1; + padding: 12px 12px 12px 0; + max-height: 300px; + overflow-y: scroll; + overflow-wrap: anywhere; + white-space: pre; + + &.disabled { + color: theme.$text-sending; + } + } + } + } +} \ No newline at end of file diff --git a/src/client/webapp/styles/title-bar.scss b/src/client/webapp/elements-styles/sections/title-bar.scss similarity index 75% rename from src/client/webapp/styles/title-bar.scss rename to src/client/webapp/elements-styles/sections/title-bar.scss index 53e16af..7bd164f 100644 --- a/src/client/webapp/styles/title-bar.scss +++ b/src/client/webapp/elements-styles/sections/title-bar.scss @@ -1,10 +1,10 @@ -@import "theme.scss"; +@use "../../styles/theme.scss"; .title-bar { display: flex; .app-title { - color: $text-muted; + color: theme.$text-muted; padding: 6px 0px 0px 10px; flex: 1; -webkit-app-region: drag; /* Also allows for double-click maximise & right-click menu */ @@ -14,7 +14,7 @@ display: flex; > * { - color: $interactive-normal; + color: theme.$interactive-normal; background: none; border: none; width: 28px; @@ -27,8 +27,8 @@ .minimize:hover, .maximize:hover { - color: $interactive-hover; - background-color: $background-modifier-hover; + color: theme.$interactive-hover; + background-color: theme.$background-modifier-hover; } .close:hover { diff --git a/src/client/webapp/elements/components/components.scss b/src/client/webapp/elements/components/components.scss deleted file mode 100644 index 54bce48..0000000 --- a/src/client/webapp/elements/components/components.scss +++ /dev/null @@ -1,275 +0,0 @@ -@import "../../styles/theme.scss"; - -.text-input-react { - .label { - font-size: 0.75em; - font-weight: bold; - color: $interactive-normal; - text-transform: uppercase; - margin-bottom: 2px; - } - - input { - font-size: inherit; - font-family: inherit; - color: $text-normal; - background-color: $background-input; - border: 1px solid $border-input; - border-radius: 3px; - max-height: 100px; - overflow-y: scroll; - padding: 8px; - - &:hover { - border-color: $border-input-hover; - } - - &:focus { - outline: none; - border-color: $border-input-focus; - } - } -} - -.image-edit-input-react { - position: relative; - - label { - cursor: pointer; - } - - img.value { - width: 64px; - height: 64px; - border-radius: 8px; - display: block; - } - - .modify { - position: absolute; - background-color: $brand; - padding: 6px; - border-radius: 16px; - right: -4px; - bottom: -4px; - - img.pencil { - display: block; - width: 10px; - height: 10px; - } - } - - input { - display: none; - } -} - -.dropdown-react { - position: relative; - display: inline-block; - - .label { - font-size: 0.75em; - font-weight: bold; - color: $interactive-normal; - text-transform: uppercase; - margin-bottom: 2px; - } - - .display { - background-color: $background-input; - color: $text-normal; - padding: 8px; - border-radius: 3px; - cursor: pointer; - - border: 1px solid $border-input; - } - - &:hover .display { - border-color: $border-input-hover; - } - - &:focus .display { - border-color: $border-input-focus; - } - - .options { - position: absolute; - left: 0; - bottom: 0; - width: 100%; - height: 0; - cursor: pointer; - - &:not(.open) { - display: none; - } - - .option { - padding: 8px; - color: $text-normal; - background-color: $background-dropdown-option; - - &:hover { - background-color: $background-dropdown-option-hover; - } - } - } -} - -.display { - $content-border-radius: 4px; - - flex: 1; - border-top-right-radius: $content-border-radius; - border-bottom-right-radius: $content-border-radius; - background-color: $background-primary; - overflow-y: scroll; - position: relative; - - > .scroll { - margin: 32px; - - .divider { - margin: 16px 0; - height: 1px; - background-color: $background-primary-divider; - } - } - - > .popup { - position: absolute; - bottom: 0; - left: 0; - box-sizing: border-box; - width: 100%; - - .content { - margin: 16px; - padding: 12px 12px 12px 16px; - display: flex; - justify-content: space-between; - align-items: center; - color: $interactive-active; - background-color: $background-popup-message; - border-radius: 8px; - } - - .tip { - font-weight: 500; - } - - .actions { - display: flex; - - .button { - padding: 8px 12px; - font-size: 0.85em; - font-weight: bold; - } - - :not(:last-child) { - margin-right: 4px; - } - } - } -} - -.lower-react { - .error-container { - background-color: $background-secondary-alt; - overflow-y: hidden; - max-height: 0; - transition: max-height 0.2s ease-in-out; - - &:not(.empty) { - max-height: 48px; - } - - .error { - font-size: 16px; - line-height: 1; - padding: 16px 16px; - height: 16px; - color: $text-normal; - - &::first-letter { - text-transform: uppercase; - } - } - } - - .buttons { - padding: 16px; - display: flex; - justify-content: flex-end; - background-color: $background-tertiary; - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; - } -} - -.guild-preview { - display: flex; - align-items: center; - - .icon { - width: 64px; - height: 64px; - margin-right: 16px; - border-radius: 8px; - } - - .name { - color: $header-primary; - font-size: 1.25em; - font-weight: 600; - } - - .url { - color: $text-normal; - } - - .expires { - color: $text-muted; - font-size: 12px; - font-weight: 600; - } -} - -.file-drop { - position: fixed; - width: 100vw; - height: calc(100vh - 22px); - top: 22px; - left: 0; - display: flex; - justify-content: center; - align-items: center; - background-color: $background-overlay; - - .panel { - // TODO: make this nicer - color: $text-normal; - background-color: $background-primary; - padding: 16px; - border-radius: 8px; - - display: flex; - align-items: center; - - img.drop-icon { - display: block; - height: 128px; - max-width: 128px; - margin-right: 16px; - } - - .drop-message { - font-size: 2em; - color: $header-primary; - } - } -} diff --git a/src/client/webapp/elements/components/input-dropdown.tsx b/src/client/webapp/elements/components/input-dropdown.tsx index 3279c6d..e92c04c 100644 --- a/src/client/webapp/elements/components/input-dropdown.tsx +++ b/src/client/webapp/elements/components/input-dropdown.tsx @@ -63,7 +63,7 @@ const DropdownInput: FC = (props: DropdownInputProps) => {
{labelElement}
{display}
diff --git a/src/client/webapp/elements/lists/channel-list.scss b/src/client/webapp/elements/lists/channel-list.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/client/webapp/elements/lists/components/channel-element.scss b/src/client/webapp/elements/lists/components/channel-element.scss deleted file mode 100644 index 5a576d1..0000000 --- a/src/client/webapp/elements/lists/components/channel-element.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import "../../../styles/theme.scss"; - -.channel .channel-gear-hover { - display: flex; - align-items: center; - line-height: 1; - - .tab { - color: $background-floating; // svg - } - - .text { - color: $text-normal; - background-color: $background-floating; - padding: 8px; - border-radius: 4px; - } -} diff --git a/src/client/webapp/elements/lists/components/member-element.scss b/src/client/webapp/elements/lists/components/member-element.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/client/webapp/elements/lists/components/message-element.scss b/src/client/webapp/elements/lists/components/message-element.scss deleted file mode 100644 index 13bf0c0..0000000 --- a/src/client/webapp/elements/lists/components/message-element.scss +++ /dev/null @@ -1,144 +0,0 @@ -@import "../../../styles/theme.scss"; - -.message-react { - display: flex; - padding: 4px 16px; - - &.continued { - margin-top: -4px; - - .timestamp { - flex: none; /* >:| NOT GONNA SHRINK BOI */ - margin: 0; - width: 40px; - visibility: hidden; - } - - &:hover .timestamp { - visibility: visible; - } - } - - .member-avatar img { - width: 40px; - height: 40px; - border-radius: 20px; - cursor: pointer; - user-select: none; - } - - .right { - flex: 1; - display: flex; - flex-flow: column; - align-items: flex-start; - margin-left: 16px; /* putting the margin here rather than on the avatar makes selecting better */ - user-select: text; - } - - .header { - display: flex; - align-items: baseline; - } - - .member-name { - font-size: 16px; - line-height: 22px; - font-weight: 500; - color: $header-primary; - cursor: pointer; - white-space: nowrap; - } - - .member-name:hover { - text-decoration: underline; - } - - .timestamp { - font-size: 12px; - line-height: 22px; - font-weight: 500; - color: $text-muted; - margin-left: 4px; - white-space: nowrap; - } - - .content { - font-size: 16px; - color: $text-normal; - overflow-wrap: anywhere; - - &.text { - white-space: pre-wrap; - - .bold { - font-weight: 600; - color: $header-primary; /* a bit brighter for some more emphasis */ - } - - .underline { - text-decoration: underline; - } - - .italic { - font-style: italic; - } - } - - &.image { - /* Center the loading icon */ - display: flex; - justify-content: center; - align-items: center; - border-radius: 8px; - background-color: $background-secondary-alt; - cursor: pointer; - overflow: hidden; - - img { - max-width: 400px; - max-height: 300px; - border-radius: 8px; - } - } - - /* TODO: ellipse the overflow */ - &.resource { - min-width: 300px; - max-width: 400px; - display: flex; - align-items: center; - background-color: $background-secondary-alt; - padding: 8px 12px; - border-radius: 8px; - cursor: pointer; - - &:hover .download-status { - text-decoration: underline; - } - - > :not(:last-child) { - margin-right: 12px; - } - - .icon { - max-width: 32px; - height: 32px; - -webkit-user-select: none; - user-select: none; - } - - .filename { - color: $text-link; - } - - .download-status { - font-size: 12px; - font-weight: 500; - color: $text-muted; - -webkit-user-select: none; - user-select: none; - } - } - } -} diff --git a/src/client/webapp/elements/lists/guild-list.scss b/src/client/webapp/elements/lists/guild-list.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/client/webapp/elements/lists/lists.scss b/src/client/webapp/elements/lists/lists.scss deleted file mode 100644 index 8182f92..0000000 --- a/src/client/webapp/elements/lists/lists.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import "./channel-list.scss"; -@import "./member-list.scss"; -@import "./message-list.scss"; - -@import "./components/channel-element.scss"; -@import "./components/member-element.scss"; -@import "./components/message-element.scss"; diff --git a/src/client/webapp/elements/lists/member-list.scss b/src/client/webapp/elements/lists/member-list.scss deleted file mode 100644 index 1c77634..0000000 --- a/src/client/webapp/elements/lists/member-list.scss +++ /dev/null @@ -1,33 +0,0 @@ -@import "../../styles/theme.scss"; - -.member-list-wrapper { - box-sizing: border-box; - flex: none; /* >:| NOT GONNA SHINK BOI */ - background-color: $background-secondary; - width: 240px; - height: calc(100vh - 71px); - overflow-y: scroll; - padding: 8px 0 8px 8px; - - .member-list { - .member { - background-color: $background-secondary; - padding: 4px 8px; - margin-bottom: 4px; - border-radius: 4px; - } - - .member .name { - width: calc(208px - 40px); - } - - .member .status-circle { - border-color: $background-secondary; - } - - .member:hover { - background-color: $background-modifier-hover; - cursor: pointer; - } - } -} diff --git a/src/client/webapp/elements/overlays/overlays.scss b/src/client/webapp/elements/overlays/overlays.scss deleted file mode 100644 index ae0f12d..0000000 --- a/src/client/webapp/elements/overlays/overlays.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import "./overlay-add-guild.scss"; -@import "./overlay-error-message.scss"; -@import "./overlay-guild-settings.scss"; -@import "./overlay-image.scss"; -@import "./overlay-channel.scss"; -@import "./overlay-personalize.scss"; diff --git a/src/client/webapp/index.html b/src/client/webapp/index.html index 764c1e0..6d8a17e 100644 --- a/src/client/webapp/index.html +++ b/src/client/webapp/index.html @@ -3,7 +3,7 @@ - +
diff --git a/src/client/webapp/index.scss b/src/client/webapp/index.scss new file mode 100644 index 0000000..e821451 --- /dev/null +++ b/src/client/webapp/index.scss @@ -0,0 +1,48 @@ +@use "styles/theme.scss"; +@use "styles/fonts.scss"; + +@use "styles/general.scss"; +@use "styles/scrollbars.scss"; + +@use "styles/shake.scss"; +@use "styles/status-circles.scss"; + +@use "elements-styles/components/buttons.scss"; +@use "elements-styles/components/file-drop-target.scss"; +@use "elements-styles/components/input-dropdown.scss"; +@use "elements-styles/components/input-image-edit.scss"; +@use "elements-styles/components/input-text.scss"; +@use "elements-styles/components/invite-preview.scss"; +@use "elements-styles/components/submit-overlay-lower.scss"; + +@use "elements-styles/contexts/components/context.scss"; +@use "elements-styles/contexts/components/context-menu.scss"; + +@use "elements-styles/lists/components/channel-element.scss"; +@use "elements-styles/lists/components/member-element.scss"; +@use "elements-styles/lists/components/message-element.scss"; + +@use "elements-styles/lists/channel-list.scss"; +@use "elements-styles/lists/guild-list.scss"; +@use "elements-styles/lists/member-list.scss"; +@use "elements-styles/lists/message-list.scss"; + +@use "elements-styles/overlays/components/overlay.scss"; + +@use "elements-styles/overlays/overlay-add-guild.scss"; +@use "elements-styles/overlays/overlay-channel.scss"; +@use "elements-styles/overlays/overlay-error-message.scss"; +@use "elements-styles/overlays/overlay-guild-settings.scss"; +@use "elements-styles/overlays/overlay-image.scss"; +@use "elements-styles/overlays/overlay-personalize.scss"; + +@use "elements-styles/sections/channel-title.scss"; +@use "elements-styles/sections/connection-info.scss"; +@use "elements-styles/sections/guild-list-container.scss"; +@use "elements-styles/sections/guild-title.scss"; +@use "elements-styles/sections/guild.scss"; +@use "elements-styles/sections/guilds-manager.scss"; +@use "elements-styles/sections/send-message.scss"; +@use "elements-styles/sections/title-bar.scss"; + +@use "elements-styles/root.scss"; diff --git a/src/client/webapp/styles/buttons.scss b/src/client/webapp/styles/buttons.scss deleted file mode 100644 index ad42dab..0000000 --- a/src/client/webapp/styles/buttons.scss +++ /dev/null @@ -1,51 +0,0 @@ -@import "theme.scss"; - -/* Buttons */ -.button { - display: inline-block; - background-color: $brand; - color: $header-primary; - cursor: pointer; - border-radius: 4px; - padding: 8px 24px; - - &:hover { - background-color: $brand-hover; - } - - &.positive { - background-color: $background-button-positive; - - &:hover { - background-color: $background-button-positive-hover; - } - } - - &.negative { - background-color: $background-button-negative; - - &:hover { - background-color: $background-button-negative-hover; - } - } - - &.perdu { - background-color: $background-button-perdu; - - &:hover { - background-color: $background-button-perdu-hover; - } - } - - &.lower-submit { - padding: 8px 24px; - } - - &.display-popup { - padding: 6px 12px; - } - - &.table-icon { - padding: 4px; - } -} diff --git a/src/client/webapp/styles/channel-feed.scss b/src/client/webapp/styles/channel-feed.scss deleted file mode 100644 index 25860a8..0000000 --- a/src/client/webapp/styles/channel-feed.scss +++ /dev/null @@ -1,117 +0,0 @@ -@import "theme.scss"; - -$scrollbarBottom: 4px; -$borderRadius: 8px; - -.guild-channel-content { - flex: 1; - display: flex; - - .guild-channel-feed-wrapper { - flex: 1; - width: 0; - display: flex; - flex-direction: column; - - .send-message-input-wrapper { - position: relative; - height: 0; - - .send-message-input { - position: absolute; - left: 0; - bottom: 0; - margin: 0 16px 16px 16px; - box-sizing: border-box; - width: calc(100% - 32px); - - display: flex; - flex-flow: column; - align-items: flex-start; - - color: $text-normal; - background-color: $channeltextarea-background; - border-radius: $borderRadius; - - .attachment-preview { - position: relative; - margin: 16px 16px 0 16px; - padding: 8px; - border-radius: 8px; - box-sizing: border-box; - max-width: calc(100% - 32px); - background-color: $background-secondary; - - img.preview { - max-width: 128px; - max-height: 128px; - border-radius: 4px; - object-fit: contain; - } - - .name { - line-height: 1; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - .remove { - position: absolute; - right: -8px; - top: -8px; - border-radius: 8px; - cursor: pointer; - color: $background-button-negative; - - &:hover { - color: $background-button-negative-hover; - } - - svg { - width: 20px; - height: 20px; - } - } - } - - .divider { - box-sizing: border-box; - width: 100%; - margin: 16px 0 0 0; - height: 1px; - background-color: $interactive-muted; - } - - .send-message-input-row { - width: 100%; - display: flex; - align-items: flex-start; - - .attachment-input-button { - cursor: pointer; - margin: 12px; - - svg { - width: 24px; - height: 24px; - } - } - - .text-input { - flex: 1; - padding: 12px 12px 12px 0; - max-height: 300px; - overflow-y: scroll; - overflow-wrap: anywhere; - white-space: pre; - - &.disabled { - color: $text-sending; - } - } - } - } - } - } -} diff --git a/src/client/webapp/styles/contexts.scss b/src/client/webapp/styles/contexts.scss deleted file mode 100644 index 277b8b8..0000000 --- a/src/client/webapp/styles/contexts.scss +++ /dev/null @@ -1,133 +0,0 @@ -@import "theme.scss"; - -/* Contexts */ - -.context { - position: fixed; - z-index: 1; - - // Since useEffect gets called after the element is rendered, hide it until - // it gets aligned - &.react:not(.aligned) { - visibility: hidden; - } - - .menu { - min-width: 180px; - box-sizing: border-box; - font-size: 14px; - background-color: $background-floating; - color: $text-normal; - padding: 8px; - border-radius: 4px; - - .item-spacer { - background-color: $background-secondary; - height: 1px; - margin: 6px 0; - } - - .item { - padding: 8px; - border-radius: 2px; - cursor: pointer; - display: flex; - align-items: center; - } - - .item:hover { - color: $header-primary; - background-color: $brand-hover; - } - - .item.red { - color: $item-red; - font-weight: 600; - } - - .item.red:hover { - color: $header-primary; - background-color: $item-red; - } - - .item .icon { - margin-right: 8px; - } - - .guild-title-context-menu .item .icon img, - .guild-title-context-menu .item .icon svg { - width: 16px; - height: 16px; - } - - .member-context .item { - display: flex; - align-items: center; - line-height: 1; - } - - .member-context .item .icon img, - .member-context .item .icon svg { - width: 10px; - height: 10px; - } - - .member-context .item .status-circle { - width: 10px; - height: 10px; - border-radius: 5px; - margin-right: 8px; - } - - .member-context .item .status-text { - text-transform: capitalize; - } - } - - .above, - .below { - display: flex; - flex-flow: column; - align-items: center; - color: $background-floating; /* for the tab */ - } - - .above .content, - .below .content { - color: $header-primary; - background-color: $background-floating; - padding: 8px; - border-radius: 4px; - } - - .add-guild-hover, - .guild-hover { - display: flex; - align-items: center; - color: $background-floating; /* for the tab */ - - .info { - background-color: $background-floating; - color: $header-primary; - padding: 12px; - border-radius: 4px; - line-height: 1; - - > :not(:last-child) { - margin-bottom: 4px; - } - - .connection { - display: flex; - align-items: center; - } - - .connection .status-circle { - width: 10px; - height: 10px; - border-radius: 5px; - margin-right: 4px; - } - } - } -} diff --git a/src/client/webapp/styles/error-indicator.scss b/src/client/webapp/styles/error-indicator.scss deleted file mode 100644 index 92fa384..0000000 --- a/src/client/webapp/styles/error-indicator.scss +++ /dev/null @@ -1,23 +0,0 @@ -@import "theme.scss"; - -.error-indicator { - display: flex; - justify-content: center; - align-items: center; - color: $header-primary; - - img { - width: 32px; - height: 32px; - margin-right: 8px; - } - - .retry-button { - color: $text-link; - cursor: pointer; - } - - .retry-button:hover { - text-decoration: underline; - } -} diff --git a/src/client/webapp/styles/fonts.scss b/src/client/webapp/styles/fonts.scss index 2b7d134..b61a9c1 100644 --- a/src/client/webapp/styles/fonts.scss +++ b/src/client/webapp/styles/fonts.scss @@ -1,31 +1,31 @@ @font-face { font-family: Whitney; font-weight: 300; - src: url(../font/whitney/whitney-300.woff); + src: url(./font/whitney/whitney-300.woff); } @font-face { font-family: Whitney; font-weight: 400; - src: url(../font/whitney/whitney-400.woff); + src: url(./font/whitney/whitney-400.woff); } @font-face { font-family: Whitney; font-weight: 500; - src: url(../font/whitney/whitney-500.woff); + src: url(./font/whitney/whitney-500.woff); } @font-face { font-family: Whitney; font-weight: 600; - src: url(../font/whitney/whitney-600.woff); + src: url(./font/whitney/whitney-600.woff); } @font-face { font-family: Whitney; font-weight: 700; - src: url(../font/whitney/whitney-700.woff); + src: url(./font/whitney/whitney-700.woff); } strong, b { diff --git a/src/client/webapp/styles/general.scss b/src/client/webapp/styles/general.scss index 21244be..95eb1e1 100644 --- a/src/client/webapp/styles/general.scss +++ b/src/client/webapp/styles/general.scss @@ -1,4 +1,4 @@ -@import "theme.scss"; +@use "theme.scss"; /* disable draggable "ghost" image elements */ img { @@ -25,14 +25,14 @@ body { } :root { - background-color: $background-tertiary; + background-color: theme.$background-tertiary; } // https://stackoverflow.com/questions/16941360/how-to-create-a-placeholder-for-div-that-act-like-textfield [contenteditable=plaintext-only]:empty::before{ content:attr(data-placeholder); cursor: text; - color: $text-muted; + color: theme.$text-muted; } [contenteditable=plaintext-only]:focus { diff --git a/src/client/webapp/styles/guild-list.scss b/src/client/webapp/styles/guild-list.scss deleted file mode 100644 index 8bca549..0000000 --- a/src/client/webapp/styles/guild-list.scss +++ /dev/null @@ -1,68 +0,0 @@ -@import "theme.scss"; - -.guild-list-container { - display: flex; - flex-flow: column; - overflow-y: scroll; - box-sizing: border-box; - flex: none; /* >:| NOT GONNA SHINK BOI */ - width: 72px; /* TODO: auto-calculated from content */ - height: calc(100vh - 22px); - padding-top: 8px; - overflow-y: scroll; - - .guild-list { - display: flex; - flex-flow: column; - } - - .guild-listguild-list::-webkit-scrollbar { - display: none; - } - - .add-guild, - .guild-list .guild { - cursor: pointer; - margin-bottom: 8px; - display: flex; - align-items: center; - } - - .add-guild .pill, - .guild-list .guild .pill { - background-color: $header-primary; - width: 8px; - height: 0; - border-radius: 4px 4px; - margin-left: -4px; - margin-right: 8px; - transition: height .1s ease-in-out; - } - - .guild-list .guild.active .pill { - height: 40px; - } - - .guild-list .guild.unread:not(.active) .pill { - height: 8px; - } - - .add-guild:hover .pill, - .guild-list .guild:not(.active):hover .pill { - height: 20px; - } - - .add-guild img, - .guild-list .guild img { - width: 48px; - height: 48px; - border-radius: 24px; - transition: border-radius .1s ease-in-out; - } - - .add-guild:hover img, - .guild-list .guild:hover img, - .guild-list .guild.active img { - border-radius: 16px; - } -} diff --git a/src/client/webapp/styles/guild.scss b/src/client/webapp/styles/guild.scss deleted file mode 100644 index 7a8663b..0000000 --- a/src/client/webapp/styles/guild.scss +++ /dev/null @@ -1,32 +0,0 @@ -@import "theme.scss"; - -.guild-react { - flex: 1; - display: flex; - - .guild-sidebar { - flex: none; /* >:| NOT GONNA SHINK BOI */ - width: 240px; - display: flex; - flex-direction: column; - background-color: $background-secondary; - border-top-left-radius: 8px; - - .guild-name-container { - padding: 0 16px; - height: 48px; - font-weight: 600; - display: flex; - align-items: center; - color: $header-primary; - border-bottom: 1px solid $background-secondary-alt; - - .guild-name { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - } -} diff --git a/src/client/webapp/styles/scrollbars.scss b/src/client/webapp/styles/scrollbars.scss index 231ebcd..29584f4 100644 --- a/src/client/webapp/styles/scrollbars.scss +++ b/src/client/webapp/styles/scrollbars.scss @@ -1,4 +1,4 @@ -@import "theme.scss"; +@use "theme.scss"; /* channel feed custom scrollbar */ /* Note: Using this hack... https://stackoverflow.com/questions/29866759/how-do-i-add-a-margin-to-a-css-webkit-scrollbar */ @@ -8,14 +8,14 @@ .message-list .infinite-scroll-scroll-base::-webkit-scrollbar-track { visibility: visible; /* always visible, does not disappear when not hovered over */ - box-shadow: 0 0 12px 12px $background-secondary inset; + box-shadow: 0 0 12px 12px theme.$background-secondary inset; border: 4px solid transparent; border-radius: 12px; } .message-list .infinite-scroll-scroll-base::-webkit-scrollbar-thumb { visibility: visible; /* always visible, does not disappear when not hovered over */ - box-shadow: 0 0 12px 12px $background-tertiary inset; + box-shadow: 0 0 12px 12px theme.$background-tertiary inset; border: 4px solid transparent; border-radius: 12px; } @@ -35,7 +35,7 @@ } ::-webkit-scrollbar-thumb { - box-shadow: 0 0 2px 2px $background-tertiary inset; + box-shadow: 0 0 2px 2px theme.$background-tertiary inset; border: 2px solid transparent; border-radius: 4px; } diff --git a/src/client/webapp/styles/shake.scss b/src/client/webapp/styles/shake.scss index 4b37e60..04652a0 100644 --- a/src/client/webapp/styles/shake.scss +++ b/src/client/webapp/styles/shake.scss @@ -1,4 +1,4 @@ -@import "theme.scss"; +@use "theme.scss"; /* Shaking Elements */ @keyframes shake-horizontal { diff --git a/src/client/webapp/styles/status-circles.scss b/src/client/webapp/styles/status-circles.scss index 3e4fccc..5db8914 100644 --- a/src/client/webapp/styles/status-circles.scss +++ b/src/client/webapp/styles/status-circles.scss @@ -1,22 +1,22 @@ -@import "theme.scss"; +@use "theme.scss"; /* Status Circles */ .online .status-circle { - background-color: $online; + background-color: theme.$online; } .away .status-circle { - background-color: $away; + background-color: theme.$away; } .busy .status-circle { - background-color: $busy; + background-color: theme.$busy; } .unknown .status-circle, .connecting .status-circle, .offline .status-circle, .invisible .status-circle { - background-color: $offline; + background-color: theme.$offline; } diff --git a/src/client/webapp/styles/styles.scss b/src/client/webapp/styles/styles.scss deleted file mode 100644 index 7f96109..0000000 --- a/src/client/webapp/styles/styles.scss +++ /dev/null @@ -1,25 +0,0 @@ -@import "theme.scss"; -@import "fonts.scss"; - -@import "../elements/components/components.scss"; -@import "../elements/overlays/overlays.scss"; - -@import "../elements/lists/lists.scss"; - -@import "buttons.scss"; -@import "channel-feed.scss"; -@import "channel-list.scss"; -@import "channel.scss"; -@import "connection.scss"; -@import "contexts.scss"; -@import "error-indicator.scss"; -@import "general.scss"; -@import "members.scss"; -@import "overlays.scss"; -@import "scrollbars.scss"; -@import "guilds-manager.scss"; -@import "guild-list.scss"; -@import "guild.scss"; -@import "shake.scss"; -@import "status-circles.scss"; -@import "title-bar.scss";