Fijxu/justlog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

improve theming

Browse source
This commit is contained in:
gempir 2020-11-07 11:16:33 +01:00
parent a8a3250410
commit 287a996676
5 changed files with 16 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
web/public/index.html
View file

@ -11,10 +11,10 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<style> <style>
:root { :root {
--bg: #121416; --bg: #0e0e10;
--bg-bright: #1C1F22; --bg-bright: #18181b;
--bg-brighter: #25292D; --bg-brighter: #3d4146;
--bg-dark: #090A0B; --bg-dark: #121416;
--theme: #00CC66; --theme: #00CC66;
--theme-bright: #00FF80; --theme-bright: #00FF80;
--text: #F5F5F5; --text: #F5F5F5;
@ -24,7 +24,7 @@
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: var(--bg-dark); background: var(--bg);
font-family: Helvetica, Arial, sans-serif; font-family: Helvetica, Arial, sans-serif;
height: 100%; height: 100%;
width: 100%; width: 100%;

4
web/src/components/Filters.tsx
View file

@ -8,7 +8,9 @@ const FiltersContainer = styled.form`
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 15px; padding: 15px;
background: var(--bg); background: var(--bg-bright);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
width: 600px; width: 600px;
margin: 0 auto; margin: 0 auto;
`; `;

9
web/src/components/Log.tsx
View file

@ -6,7 +6,8 @@ import { store } from "../store";
import { LogLine } from "./LogLine"; import { LogLine } from "./LogLine";
const LogContainer = styled.div` const LogContainer = styled.div`
background: var(--bg); background: var(--bg-bright);
border-radius: 3px;
padding: 0.5rem; padding: 0.5rem;
margin-top: 1rem; margin-top: 1rem;
`; `;
@ -15,7 +16,9 @@ export function Log({ year, month, initialLoad = false }: { year: string, month:
const [load, setLoad] = useState(initialLoad); const [load, setLoad] = useState(initialLoad);
if (!load) { if (!load) {
return <LoadableLog year={year} month={month} onLoad={() => setLoad(true)} /> return <LogContainer>
<LoadableLog year={year} month={month} onLoad={() => setLoad(true)} />
</LogContainer>
} }
return <LogContainer> return <LogContainer>
@ -45,6 +48,6 @@ const LoadableLogContainer = styled.div`
function LoadableLog({ year, month, onLoad }: { year: string, month: string, onLoad: () => void }) { function LoadableLog({ year, month, onLoad }: { year: string, month: string, onLoad: () => void }) {
return <LoadableLogContainer> return <LoadableLogContainer>
<Button variant="contained" color="primary" size="large" onClick={onLoad}>load</Button> <Button variant="contained" color="primary" size="large" onClick={onLoad}>load {year}/{month}</Button>
</LoadableLogContainer> </LoadableLogContainer>
} }

2
web/src/components/LogContainer.tsx
View file

@ -17,6 +17,6 @@ export function LogContainer() {
const availableLogs = useAvailableLogs(state.currentChannel, state.currentUsername); const availableLogs = useAvailableLogs(state.currentChannel, state.currentUsername);
return <LogContainerDiv> return <LogContainerDiv>
{availableLogs.map(log => <Log key={`${log.year}:${log.month}`} year={log.year} month={log.month} />)} {availableLogs.map((log, index) => <Log key={`${log.year}:${log.month}`} year={log.year} month={log.month} initialLoad={index === 0} />)}
</LogContainerDiv> </LogContainerDiv>
} }

2
web/src/hooks/useLog.ts
View file

@ -14,7 +14,7 @@ export function useLog(channel: string, username: string, year: string, month: s
const channelIsId = isUserId(channel); const channelIsId = isUserId(channel);
const usernameIsId = isUserId(username); const usernameIsId = isUserId(username);
const queryUrl = new URL(`${state.apiBaseUrl}/channel${channelIsId ? "id" : ""}/${channel}/user${usernameIsId ? "id" : ""}/${username}/2020/11?reverse&json`); const queryUrl = new URL(`${state.apiBaseUrl}/channel${channelIsId ? "id" : ""}/${channel}/user${usernameIsId ? "id" : ""}/${username}/${year}/${month}?reverse&json`);
return fetch(queryUrl.toString()).then((response) => { return fetch(queryUrl.toString()).then((response) => {
if (response.ok) { if (response.ok) {