Skip to content

Commit

Permalink
refactor(css): fix heights and add better dark mode colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@ph1p
ph1p committed Aug 25, 2021
1 parent 36d7d19 commit 2969be8
Show file tree
Hide file tree
Showing 7 changed files with 194 additions and 138 deletions.
Binary file modified .yarn/install-state.gz
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion packages/shared/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "@fc/shared",
"name": "shared",
"version": "0.1.0",
"private": true,
"dependencies": {
Expand Down
9 changes: 6 additions & 3 deletions packages/web/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions packages/web/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
82 changes: 66 additions & 16 deletions packages/web/src/views/Login/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -33,19 +33,69 @@ export const Login = observer(() => {
}

return (
<div>
<input
type="text"
value={room}
onChange={(e) => setRoom(e.currentTarget.value)}
/>
<input
type="text"
value={secret}
onChange={(e) => setSecret(e.currentTarget.value)}
/>

<button onClick={enterRoom}>Enter Room</button>
</div>
<Wrapper>
<div>
<label htmlFor="room">Room</label>
<input
type="text"
value={room}
onChange={(e) => setRoom(e.currentTarget.value)}
/>
<label htmlFor="secret">Secret</label>
<input
type="text"
value={secret}
onChange={(e) => setSecret(e.currentTarget.value)}
/>

<button onClick={enterRoom}>Enter Room</button>
</div>
</Wrapper>
);
});

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;
}
`;
188 changes: 95 additions & 93 deletions packages/web/src/views/Settings/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -64,99 +63,101 @@ export const Settings: FunctionComponent = observer(() => {

return (
<Wrapper>
<Picker>
<AvatarPicker />
<ColorPicker />
</Picker>
<div>
<Picker>
<AvatarPicker />
<ColorPicker />
</Picker>

<Username>
<label>Username</label>
<input
type="text"
ref={nameInputRef}
value={settings.name}
onBlur={() => saveSettings(false)}
onChange={({ target }: any) =>
settings.setName(target.value.substr(0, 20))
}
onKeyDown={(e: any) => e.keyCode === 13 && e.target.blur()}
/>
</Username>
<ServerUrl>
<label htmlFor="server-url">
Server-URL
<span
onClick={() => {
settings.setUrl(DEFAULT_SERVER_URL);
saveSettings(settings.url !== store.settings.url);
}}
>
(reset)
</span>
</label>
<Username>
<label>Username</label>
<input
type="text"
ref={nameInputRef}
value={settings.name}
onBlur={() => saveSettings(false)}
onChange={({ target }: any) =>
settings.setName(target.value.substr(0, 20))
}
onKeyDown={(e: any) => e.keyCode === 13 && e.target.blur()}
/>
</Username>
<ServerUrl>
<label htmlFor="server-url">
Server-URL
<span
onClick={() => {
settings.setUrl(DEFAULT_SERVER_URL);
saveSettings(settings.url !== store.settings.url);
}}
>
(reset)
</span>
</label>

<input
id="server-url"
type="text"
value={settings.url}
onBlur={({ target }: any) =>
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()}
/>
</ServerUrl>
<input
id="server-url"
type="text"
value={settings.url}
onBlur={({ target }: any) =>
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()}
/>
</ServerUrl>

<div>
<ShortcutTiles>
<Tooltip
hover
handler={observer(
(_: any, ref: any) => (
<Tile
name="trash"
ref={ref}
onClick={
() => {}
// store.clearChatHistory(() => saveSettings(true))
}
>
<TrashIcon />
</Tile>
),
{ forwardRef: true }
)}
>
History
</Tooltip>
<Tooltip
hover
handler={observer(
(_: any, ref: any) => (
<Tile
name="theme"
ref={ref}
onClick={() => {
store.setIsDarkTheme(!store.settings.isDarkTheme);
saveSettings(false);
}}
>
<ThemeIcon active={store.settings.isDarkTheme} />
</Tile>
),
{ forwardRef: true }
)}
>
Theme
</Tooltip>
</ShortcutTiles>
<div>
<ShortcutTiles>
<Tooltip
hover
handler={observer(
(_: any, ref: any) => (
<Tile
name="trash"
ref={ref}
onClick={
() => {}
// store.clearChatHistory(() => saveSettings(true))
}
>
<TrashIcon />
</Tile>
),
{ forwardRef: true }
)}
>
History
</Tooltip>
<Tooltip
hover
handler={observer(
(_: any, ref: any) => (
<Tile
name="theme"
ref={ref}
onClick={() => {
store.setIsDarkTheme(!store.settings.isDarkTheme);
saveSettings(false);
}}
>
<ThemeIcon active={store.settings.isDarkTheme} />
</Tile>
),
{ forwardRef: true }
)}
>
Theme
</Tooltip>
</ShortcutTiles>

<VersionNote
target="_blank"
href="https://github.com/ph1p/figma-chat/blob/master/CHANGELOG.md"
></VersionNote>
<VersionNote
target="_blank"
href="https://github.com/ph1p/figma-chat/blob/master/CHANGELOG.md"
></VersionNote>
</div>
</div>
</Wrapper>
);
Expand Down Expand Up @@ -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`
Expand All @@ -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;
Expand Down
Loading

0 comments on commit 2969be8

Please sign in to comment.