diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz index aa4044b..1697f4c 100644 Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ diff --git a/packages/shared/package.json b/packages/shared/package.json index ac4816f..2cc9a21 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -1,5 +1,5 @@ { - "name": "@fc/shared", + "name": "shared", "version": "0.1.0", "private": true, "dependencies": { diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx index ff11e7d..692ca48 100644 --- a/packages/web/src/App.tsx +++ b/packages/web/src/App.tsx @@ -13,21 +13,24 @@ import { Login } from './views/Login'; import { Settings } from './views/Settings'; const Wrapper = styled.div` - height: 550px; + height: 100%; max-height: 100%; max-width: 500px; background-color: ${(p) => p.theme.backgroundColor}; @media (min-width: 450px) { border-radius: 8px; - box-shadow: 0 0 100px #eee; + box-shadow: 0 0 100px ${(p) => p.theme.backgroundColor}; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); + height: 550px; } `; -const Content = styled.div``; +const Content = styled.div` + height: calc(100% - 50px); +`; const Right = styled.div` display: flex; align-items: center; diff --git a/packages/web/src/index.tsx b/packages/web/src/index.tsx index 561b100..5bc6f65 100644 --- a/packages/web/src/index.tsx +++ b/packages/web/src/index.tsx @@ -15,6 +15,7 @@ import { StoreProvider, trunk, useStore } from './store/RootStore'; const GlobalStyle = createGlobalStyle` #root, body, html { height: 100%; + background-color: ${(p) => p.theme.secondaryBackgroundColor}; } ::-webkit-scrollbar-thumb { diff --git a/packages/web/src/views/Login/index.tsx b/packages/web/src/views/Login/index.tsx index 857dd48..f111486 100644 --- a/packages/web/src/views/Login/index.tsx +++ b/packages/web/src/views/Login/index.tsx @@ -1,6 +1,6 @@ -import { toJS } from 'mobx'; import { observer } from 'mobx-react-lite'; -import React, { FunctionComponent, useState } from 'react'; +import React, { useState } from 'react'; +import styled from 'styled-components'; import { useSocket } from '@fc/shared/utils/SocketProvider'; import { ConnectionEnum } from '@fc/shared/utils/interfaces'; @@ -33,19 +33,69 @@ export const Login = observer(() => { } return ( -
- setRoom(e.currentTarget.value)} - /> - setSecret(e.currentTarget.value)} - /> - - -
+ +
+ + setRoom(e.currentTarget.value)} + /> + + setSecret(e.currentTarget.value)} + /> + + +
+ ); }); + +const Wrapper = styled.div` + position: relative; + display: flex; + flex-direction: column; + z-index: 1; + padding: 30px; + height: 100%; + justify-content: center; + + label { + margin: 0 0 5px; + color: #a2adc0; + font-size: 12px; + display: block; + } + input[type='text'] { + margin-bottom: 20px; + font-size: 14px; + text-align: center; + width: 100%; + border-width: 1px; + border-color: ${(p) => p.theme.secondaryBackgroundColor}; + border-style: solid; + background-color: transparent; + color: ${(p) => p.theme.fontColor}; + padding: 8px 18px 9px; + outline: none; + border-radius: 7px; + font-weight: 400; + &::placeholder { + color: #999; + } + &:focus { + border-color: #1e1940; + } + } + button { + color: ${(p) => p.theme.fontColor}; + background-color: ${(p) => p.theme.secondaryBackgroundColor}; + border: 0; + padding: 10px 14px; + border-radius: 4px; + cursor: pointer; + } +`; diff --git a/packages/web/src/views/Settings/index.tsx b/packages/web/src/views/Settings/index.tsx index 06f2115..16d13eb 100644 --- a/packages/web/src/views/Settings/index.tsx +++ b/packages/web/src/views/Settings/index.tsx @@ -42,7 +42,6 @@ export const Settings: FunctionComponent = observer(() => { }, []); useEffect(() => { - console.log(store); settings.setName(store.settings.name); settings.setUrl(store.settings.url); settings.setEnableNotificationTooltip( @@ -64,99 +63,101 @@ export const Settings: FunctionComponent = observer(() => { return ( - - - - +
+ + + + - - - saveSettings(false)} - onChange={({ target }: any) => - settings.setName(target.value.substr(0, 20)) - } - onKeyDown={(e: any) => e.keyCode === 13 && e.target.blur()} - /> - - - + + + saveSettings(false)} + onChange={({ target }: any) => + settings.setName(target.value.substr(0, 20)) + } + onKeyDown={(e: any) => e.keyCode === 13 && e.target.blur()} + /> + + + - - saveSettings(target.value !== store.settings.url) - } - onChange={({ target }: any) => - settings.setUrl(target.value.substr(0, 255)) - } - onKeyDown={(e: any) => e.keyCode === 13 && e.target.blur()} - /> - + + saveSettings(target.value !== store.settings.url) + } + onChange={({ target }: any) => + settings.setUrl(target.value.substr(0, 255)) + } + onKeyDown={(e: any) => e.keyCode === 13 && e.target.blur()} + /> + -
- - ( - {} - // store.clearChatHistory(() => saveSettings(true)) - } - > - - - ), - { forwardRef: true } - )} - > - History - - ( - { - store.setIsDarkTheme(!store.settings.isDarkTheme); - saveSettings(false); - }} - > - - - ), - { forwardRef: true } - )} - > - Theme - - +
+ + ( + {} + // store.clearChatHistory(() => saveSettings(true)) + } + > + + + ), + { forwardRef: true } + )} + > + History + + ( + { + store.setIsDarkTheme(!store.settings.isDarkTheme); + saveSettings(false); + }} + > + + + ), + { forwardRef: true } + )} + > + Theme + + - + +
); @@ -232,7 +233,7 @@ const ShortcutTiles = styled.div` display: flex; width: 207px; justify-content: space-between; - margin: 51px auto 64px; + margin: 51px auto 0; `; const VersionNote = styled.a` @@ -255,9 +256,10 @@ const Wrapper = styled.div` position: relative; display: flex; flex-direction: column; - justify-content: space-between; + justify-content: center; z-index: 1; - padding: 49px 32px 0; + height: 100%; + padding: 40px; h4 { margin: 20px 0 15px; diff --git a/yarn.lock b/yarn.lock index 27a253e..487c7a5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1746,31 +1746,6 @@ __metadata: languageName: node linkType: soft -"@fc/shared@workspace:packages/shared": - version: 0.0.0-use.local - resolution: "@fc/shared@workspace:packages/shared" - dependencies: - "@popperjs/core": ^2.9.3 - "@types/linkifyjs": ^2.1.4 - "@types/node": ^16.7.1 - "@types/react": ^17.0.19 - "@types/react-dom": ^17.0.9 - "@types/react-router-dom": ^5.1.8 - "@types/react-timeago": ^4.1.3 - "@types/styled-components": ^5.1.12 - linkifyjs: ^3.0.0-beta.3 - mobx: ^6.3.2 - mobx-react-lite: ^3.2.0 - react: ^17.0.2 - react-dom: ^17.0.2 - react-popper: ^2.2.5 - react-spring: ^9.2.4 - react-timeago: ^6.2.1 - socket.io-client: ^4.1.3 - styled-components: ^5.3.1 - languageName: unknown - linkType: soft - "@hapi/address@npm:2.x.x": version: 2.1.4 resolution: "@hapi/address@npm:2.1.4" @@ -15109,6 +15084,31 @@ resolve@^2.0.0-next.3: languageName: node linkType: hard +"shared@workspace:packages/shared": + version: 0.0.0-use.local + resolution: "shared@workspace:packages/shared" + dependencies: + "@popperjs/core": ^2.9.3 + "@types/linkifyjs": ^2.1.4 + "@types/node": ^16.7.1 + "@types/react": ^17.0.19 + "@types/react-dom": ^17.0.9 + "@types/react-router-dom": ^5.1.8 + "@types/react-timeago": ^4.1.3 + "@types/styled-components": ^5.1.12 + linkifyjs: ^3.0.0-beta.3 + mobx: ^6.3.2 + mobx-react-lite: ^3.2.0 + react: ^17.0.2 + react-dom: ^17.0.2 + react-popper: ^2.2.5 + react-spring: ^9.2.4 + react-timeago: ^6.2.1 + socket.io-client: ^4.1.3 + styled-components: ^5.3.1 + languageName: unknown + linkType: soft + "shebang-command@npm:^1.2.0": version: 1.2.0 resolution: "shebang-command@npm:1.2.0"