From 51cfc6956f809db226874e145559160abe4e9e4a Mon Sep 17 00:00:00 2001 From: gempir Date: Sun, 8 Nov 2020 14:15:41 +0100 Subject: [PATCH] timestamp monospace and better formatted --- web/package.json | 3 +++ web/src/components/LogLine.tsx | 10 ++++++++- web/src/components/Message.tsx | 2 ++ web/yarn.lock | 37 ++++++++++++++++++++++++++++++++++ 4 files changed, 51 insertions(+), 1 deletion(-) diff --git a/web/package.json b/web/package.json index bf9100a..962bf0c 100644 --- a/web/package.json +++ b/web/package.json @@ -12,9 +12,12 @@ "@types/node": "^12.0.0", "@types/react": "^16.9.53", "@types/react-dom": "^16.9.8", + "@types/react-linkify": "^1.0.0", "@types/styled-components": "^5.1.4", + "dayjs": "^1.9.5", "react": "^17.0.1", "react-dom": "^17.0.1", + "react-linkify": "^1.0.0-alpha", "react-query": "^2.25.2", "react-scripts": "4.0.0", "typescript": "^4.0.3", diff --git a/web/src/components/LogLine.tsx b/web/src/components/LogLine.tsx index 4360ea5..32d2e9f 100644 --- a/web/src/components/LogLine.tsx +++ b/web/src/components/LogLine.tsx @@ -1,3 +1,4 @@ +import dayjs from "dayjs"; import React, { useContext } from "react"; import styled from "styled-components"; import { useThirdPartyEmotes } from "../hooks/useThirdPartyEmotes"; @@ -5,6 +6,12 @@ import { store } from "../store"; import { LogMessage } from "../types/log"; import { Message } from "./Message"; import { User } from "./User"; +import utc from "dayjs/plugin/utc"; +import timezone from "dayjs/plugin/timezone"; + +dayjs.extend(utc) +dayjs.extend(timezone) +dayjs.tz.guess() const LogLineContainer = styled.li` display: flex; @@ -13,6 +20,7 @@ const LogLineContainer = styled.li` .timestamp { color: var(--text-dark); user-select: none; + font-family: monospace; } .user { @@ -33,7 +41,7 @@ export function LogLine({ message }: { message: LogMessage }) { } return - {message.timestamp.toISOString()} + {dayjs(message.timestamp).format("YYYY-MM-DD HH:mm:ss")} {state.settings.showName.value && } diff --git a/web/src/components/Message.tsx b/web/src/components/Message.tsx index 993956c..9f1b267 100644 --- a/web/src/components/Message.tsx +++ b/web/src/components/Message.tsx @@ -8,6 +8,8 @@ import { ThirdPartyEmote } from "../types/ThirdPartyEmote"; const MessageContainer = styled.div` display: inline-flex; align-items: center; + font-size: 1rem; + line-height: 1rem; a { margin: 0 2px; diff --git a/web/yarn.lock b/web/yarn.lock index 5314aa5..70bf283 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -1786,6 +1786,13 @@ dependencies: "@types/react" "*" +"@types/react-linkify@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@types/react-linkify/-/react-linkify-1.0.0.tgz#72278026e9f945ddf895c1e9c094353d8a680812" + integrity sha512-2NKXPQGaHNfh/dCqkVC55k1tAhQyNoNZa31J50nIneMVwHqUI00FAP+Lyp8e0BarPf84kn4GRVAhtWX9XJBzSQ== + dependencies: + "@types/react" "*" + "@types/react-native@*": version "0.63.32" resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.63.32.tgz#2f6785947c9e1bb634bffd509007c7e73af823b6" @@ -3961,6 +3968,11 @@ data-urls@^2.0.0: whatwg-mimetype "^2.3.0" whatwg-url "^8.0.0" +dayjs@^1.9.5: + version "1.9.5" + resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.9.5.tgz#fd49994ebe71639d2ce9575e97186642dfce9808" + integrity sha512-WULIw7UpW/E0y6VywewpbXAMH3d5cZijEhoHLwM+OMVbk/NtchKS/W+57H/0P1rqU7gHrAArjiRLHCUhgMQl6w== + debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" @@ -7096,6 +7108,13 @@ lines-and-columns@^1.1.6: resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00" integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA= +linkify-it@^2.0.3: + version "2.2.0" + resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.2.0.tgz#e3b54697e78bf915c70a38acd78fd09e0058b1cf" + integrity sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw== + dependencies: + uc.micro "^1.0.1" + load-json-file@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8" @@ -9287,6 +9306,14 @@ react-is@^17.0.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339" integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA== +react-linkify@^1.0.0-alpha: + version "1.0.0-alpha" + resolved "https://registry.yarnpkg.com/react-linkify/-/react-linkify-1.0.0-alpha.tgz#b391c7b88e3443752fafe76a95ca4434e82e70d5" + integrity sha512-7gcIUvJkAXXttt1fmBK9cwn+1jTa4hbKLGCZ9J1U6EOkyb2/+LKL1Z28d9rtDLMnpvImlNlLPdTPooorl5cpmg== + dependencies: + linkify-it "^2.0.3" + tlds "^1.199.0" + react-query@^2.25.2: version "2.25.2" resolved "https://registry.yarnpkg.com/react-query/-/react-query-2.25.2.tgz#afefdf57a166bcbf08c93a26522a8c6cb1bdf849" @@ -10818,6 +10845,11 @@ tiny-warning@^1.0.2: resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== +tlds@^1.199.0: + version "1.212.0" + resolved "https://registry.yarnpkg.com/tlds/-/tlds-1.212.0.tgz#f3f29bd5d10d0fd9a6f171a5f9d57d58b71eccf7" + integrity sha512-03rYYO1rGhOYpdYB+wlLY2d0xza6hdN/S67ol2ZpaH+CtFedMVAVhj8ft0rwxEkr90zatou8opBv7Xp6X4cK6g== + tmp@^0.0.33: version "0.0.33" resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9" @@ -11024,6 +11056,11 @@ typescript@^4.0.3: resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.5.tgz#ae9dddfd1069f1cb5beb3ef3b2170dd7c1332389" integrity sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ== +uc.micro@^1.0.1: + version "1.0.6" + resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac" + integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA== + unicode-canonical-property-names-ecmascript@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"