Skip to content

Commit 1dfce8f

Browse files
sreeram-venkiteshsreeram-venkitesh
authored
Revamp UI (#42)
1 parent 1c8298e commit 1dfce8f

File tree

10 files changed

+112
-93
lines changed

10 files changed

+112
-93
lines changed

‎components/Button.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import classnames from "classnames";
44

55
const Button = ({
66
className = "",
7-
style = "secondary",
7+
style = "primary",
88
size = "medium",
99
onClick = () => {},
1010
disabled = false,

‎components/Header.jsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@ const Header = () => {
66
// const handleSettings = () => console.log("test")
77

88
return (
9-
<div className="flex flex-row items-center justify-between h-10 px-10 mb-5">
10-
<p className="h-min font-mono text-lg bg-gradient-to-br from-fuchsia-500 via-purple-600 to-rose-600 inline-block text-transparent bg-clip-text">&#123; json.style &#125;</p>
9+
<div className="flex flex-row items-center justify-between h-10 pr-5 mb-5">
10+
<p className="h-min text-lg font-mono bg-gradient-to-br from-fuchsia-500 via-purple-600 to-rose-600 inline-block text-transparent bg-clip-text">&#123;&nbsp;json.style&nbsp;&#125;</p>
1111
<Button
1212
size="medium"
13-
style="secondary"
14-
// onClick={handleSettings}
15-
icon={Settings}
16-
iconSize={20}
17-
className="float-right align-top"
13+
style="text"
14+
// onClick={handleCopy}
15+
className="hover:underline absolute ml-auto z-10 right-0 top-0 "
16+
label="About"
17+
1818
/>
1919
</div>
2020
);

‎constants/theme.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,20 @@ export const CODE_EDITOR_THEME = {
44
theme: "dark",
55
settings: {
66
background: "#282c34",
7-
foreground: "#ffffff",
8-
caret: "282c34",
7+
// foreground: "#F1FA8C",
8+
foreground: "#7aa2f7",
9+
caret: "fuchsia",
910
gutters: "#282c34",
10-
selection: "black",
11+
selection: "#000000",
12+
selectionMatch: "#555555",
1113
lineHighlight: "#6699ff0b",
1214
gutterBackground: "#282c34",
1315
gutterForeground: "#7d8799",
1416
},
1517
styles: [
16-
{ tag: t.brace, color: "red" },
17-
{ tag: t.squareBracket, color: "#98c379" },
18-
{ tag: t.separator, color: "orange" },
19-
{ tag: t.bool, color: "blue" },
20-
{ tag: t.string, color: "#98c379" },
18+
{ tag: t.brace, color: "#ABB2BF" },
19+
{ tag: t.squareBracket, color: "#CCCCCC" },
20+
{ tag: t.separator, color: "#ABB2BF" },
21+
{ tag: t.string, color: "#CCCCCC" },
2122
],
2223
};

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12-
"@codemirror/lang-javascript": "^6.1.2",
12+
"@codemirror/lang-json": "^6.0.1",
1313
"@lezer/highlight": "^1.1.3",
14+
"@next/font": "^13.1.1",
1415
"@uiw/codemirror-themes": "^4.19.4",
1516
"@uiw/react-codemirror": "^4.19.4",
1617
"classnames": "^2.3.2",

‎pages/_app.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
11
import "../styles/application.scss";
2+
import { Public_Sans } from "@next/font/google"
3+
4+
const publicSans = Public_Sans({
5+
weight: "400",
6+
style: "normal",
7+
subsets: ["latin"]
8+
})
29

310
function MyApp({ Component, pageProps }) {
4-
return <Component {...pageProps} />;
11+
return (
12+
<main className={publicSans.className}>
13+
<Component {...pageProps} />
14+
</main>
15+
)
516
}
617

718
export default MyApp;

‎pages/index.js‎

Lines changed: 56 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useEffect, useState, useRef } from "react";
22
import CodeMirror from "@uiw/react-codemirror";
3-
import { javascript } from "@codemirror/lang-javascript";
3+
import { json } from "@codemirror/lang-json";
44
import { createTheme } from "@uiw/codemirror-themes";
55
import { EditorView } from "@codemirror/view";
66
import Head from "next/head";
@@ -27,7 +27,7 @@ export default function Home() {
2727
const hiddenFileInput = useRef(null);
2828
const selectRef = useRef(null);
2929

30-
let editorExtensions = [javascript({ jsx: true }), EditorView.lineWrapping];
30+
let editorExtensions = [json(), EditorView.lineWrapping];
3131

3232
const handleFormat = (indentationSpace = 2) => {
3333
try {
@@ -58,7 +58,7 @@ export default function Home() {
5858
const handleCopy = () => {
5959
try {
6060
navigator.clipboard.writeText(outputString);
61-
Toastr.success("Copied to clipboard");
61+
Toastr.success("🦄 Copied to clipboard!");
6262
} catch (error) {
6363
Toastr.error("Could not Copy. Try again");
6464
}
@@ -88,80 +88,85 @@ export default function Home() {
8888
<link rel="icon" href="/favicon.ico" />
8989
</Head>
9090

91-
<main className="h-screen flex flex-col justify-between bg-zinc-900 p-5">
91+
<main className="h-screen flex flex-col justify-between bg-[#111111] pt-3 pb-4 px-4">
9292
<ToastContainer theme="dark" />
9393
<Header />
9494
<div className="space-y-3 grow flex flex-col">
95-
<div className="flex grow space-x-3">
96-
<div className="w-full bg-[#282c34]">
97-
<Button
98-
size="small"
99-
style="text"
100-
label="Demo JSON"
101-
onClick={handleDemoJson}
102-
/>
95+
<div className="flex flex-1 relative grow space-x-3">
96+
<div className="w-full">
10397
<CodeMirror
10498
autoFocus
105-
height="590px"
106-
theme="dark"
99+
height="660px"
100+
theme={createTheme(CODE_EDITOR_THEME)}
107101
value={inputString}
108102
extensions={editorExtensions}
109103
onChange={(e) => setInputString(e)}
110104
className="h-full mt-1"
111105
/>
112106
</div>
113-
<div className="w-full bg-[#282c34]">
107+
<div className="w-full relative">
114108
<Button
115-
size="small"
109+
size="medium"
116110
style="text"
117111
onClick={handleCopy}
118112
icon={Copy}
119-
className="float-right"
113+
iconSize="22"
114+
className="float-right absolute z-10 right-0 top-0"
120115
disabled={outputString === ""}
121116
/>
122117
<CodeMirror
123-
height="590px"
118+
height="660px"
124119
theme={createTheme(CODE_EDITOR_THEME)}
125120
editable={false}
126121
value={outputString}
127122
extensions={editorExtensions}
128-
className="overflow-auto h-full mt-7"
123+
className="overflow-auto absolute h-full mt-1 w-full"
129124
/>
130125
</div>
131-
</div>
132-
<div className="flex justify-end bg-zinc-800 space-x-3 px-3 py-3 rounded">
133-
<Button
134-
label="Format"
135-
onClick={() => handleFormat(selectRef.current.state.value.value)}
136-
/>
137-
<Button label="Clear" onClick={handleClear} />
138-
<Button
139-
label="Download"
140-
onClick={handleDownload}
141-
disabled={outputString === ""}
142-
/>
143-
<Button
144-
onClick={() => hiddenFileInput.current.click()}
145-
label="Upload"
146-
/>
147-
<input
148-
type="file"
149-
style={{ display: "none" }}
150-
ref={hiddenFileInput}
151-
onChange={handleUpload}
152-
/>
153-
<Select
154-
ref={selectRef}
155-
classNamePrefix="react-select"
156-
onChange={(e) => handleFormat(e.value)}
157-
className={"react-select__container"}
158-
menuPlacement="top"
159-
options={INDENTATION_SPACE_OPTIONS}
160-
defaultValue={DEFAULT_INDENTATION_SPACE}
161-
/>
126+
<div className="flex flex-col min-w-80 w-80 justify-start space-y-2 px-1 rounded">
127+
<label className="text-xs text-[#888888]">Formatting</label>
128+
<div className="flex flex-col space-y-2">
129+
<Button
130+
label="Prettify"
131+
onClick={() => handleFormat(selectRef.current.state.value.value)}
132+
/>
133+
<Button label="Clear" onClick={handleClear} />
134+
<Button
135+
label="Download ↓"
136+
onClick={handleDownload}
137+
disabled={outputString === ""}
138+
/>
139+
<Button
140+
onClick={() => hiddenFileInput.current.click()}
141+
label="Upload ↑"
142+
/>
143+
<Button
144+
onClick={handleDemoJson}
145+
label="Demo JSON"
146+
/>
147+
</div>
148+
<label className="text-xs pt-3 text-[#888888]">Indentation</label>
149+
<div className="flex flex-col">
150+
<input
151+
type="file"
152+
style={{ display: "none" }}
153+
ref={hiddenFileInput}
154+
onChange={handleUpload}
155+
/>
156+
<Select
157+
ref={selectRef}
158+
classNamePrefix="react-select"
159+
onChange={(e) => handleFormat(e.value)}
160+
className={"react-select__container"}
161+
menuPlacement="bottom"
162+
options={INDENTATION_SPACE_OPTIONS}
163+
defaultValue={DEFAULT_INDENTATION_SPACE}
164+
/>
165+
</div>
166+
167+
</div>
162168
</div>
163169
</div>
164-
{/* <Footer /> */}
165170
</main>
166171
<script data-goatcounter="https://json-style.goatcounter.com/count"
167172
async src="//gc.zgo.at/count.js"></script>

‎styles/abstracts/_variable.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
$white: #ffffff;
2-
$primary: #701a75;
2+
$primary: #49263E;
3+
$primary-hover: #3C0F3F;
34
$secondary: #831843;
45
$gray-400: #9ca3af;
56
$gray-900: #111827;
67

78
// Font Weight
89
$font-sm: 14px;
9-
$font-semibold: 600;
10+
$font-semibold: 400;
1011

1112
// Font Size
1213
$text-sm: 12px;

‎styles/components/_button.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.button {
2-
display: inline-flex;
2+
// display: inline-flex;
33
align-items: center;
4-
font-size: $font-sm;
4+
font-size: $text-sm;
55
font-weight: $font-semibold;
66
border-radius: $border-rounded-md;
77
line-height: 1.2;
@@ -47,11 +47,11 @@
4747

4848
&-medium {
4949
font-size: $text-base;
50-
padding: 6px 10px;
50+
padding: 10px 10px;
5151
}
5252

5353
&-large {
5454
font-size: $text-base;
55-
padding: 8px 12px;
55+
padding: 12px 12px;
5656
}
5757
}

‎styles/components/_select.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
}
1212

1313
.react-select__control {
14-
background-color: $secondary;
14+
background-color: $primary;
1515
border: none;
1616
color: white;
1717
}
@@ -30,14 +30,14 @@
3030
}
3131

3232
.react-select__menu {
33-
background-color: #b14b74b9;
33+
background-color: #49263E;
3434

3535
.react-select__option--is-focused {
36-
background-color: #461629b9;
36+
background-color: #612c41b9;
3737
}
3838

3939
.react-select__option--is-selected {
40-
background-color: #2e111db9;
40+
background-color: #461629b9;
4141
}
4242
}
4343
}

‎yarn.lock‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -98,18 +98,13 @@
9898
"@codemirror/view" "^6.0.0"
9999
"@lezer/common" "^1.0.0"
100100

101-
"@codemirror/lang-javascript@^6.1.2":
102-
version "6.1.2"
103-
resolved "https://registry.yarnpkg.com/@codemirror/lang-javascript/-/lang-javascript-6.1.2.tgz#a11812ca1d21301cdeb80e51b4c007edcf55f813"
104-
integrity sha512-OcwLfZXdQ1OHrLiIcKCn7MqZ7nx205CMKlhe+vL88pe2ymhT9+2P+QhwkYGxMICj8TDHyp8HFKVwpiisUT7iEQ==
101+
"@codemirror/lang-json@^6.0.1":
102+
version "6.0.1"
103+
resolved "https://registry.yarnpkg.com/@codemirror/lang-json/-/lang-json-6.0.1.tgz#0a0be701a5619c4b0f8991f9b5e95fe33f462330"
104+
integrity sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==
105105
dependencies:
106-
"@codemirror/autocomplete" "^6.0.0"
107106
"@codemirror/language" "^6.0.0"
108-
"@codemirror/lint" "^6.0.0"
109-
"@codemirror/state" "^6.0.0"
110-
"@codemirror/view" "^6.0.0"
111-
"@lezer/common" "^1.0.0"
112-
"@lezer/javascript" "^1.0.0"
107+
"@lezer/json" "^1.0.0"
113108

114109
"@codemirror/language@^6.0.0":
115110
version "6.3.2"
@@ -312,10 +307,10 @@
312307
dependencies:
313308
"@lezer/common" "^1.0.0"
314309

315-
"@lezer/javascript@^1.0.0":
316-
version "1.4.0"
317-
resolved "https://registry.yarnpkg.com/@lezer/javascript/-/javascript-1.4.0.tgz#fe71474fcadc6112fb0978310faed0788d0af824"
318-
integrity sha512-MQ3oLJGEtpUgZ03LOLI60tDnjSkKO6h9hZSe31qJ1UQV+I9bpv3pwSnPUnX0+e+3E1PBVkox0GB2/MXkxg0M2w==
310+
"@lezer/json@^1.0.0":
311+
version "1.0.0"
312+
resolved "https://registry.yarnpkg.com/@lezer/json/-/json-1.0.0.tgz#848ad9c2c3e812518eb02897edd5a7f649e9c160"
313+
integrity sha512-zbAuUY09RBzCoCA3lJ1+ypKw5WSNvLqGMtasdW6HvVOqZoCpPr8eWrsGnOVWGKGn8Rh21FnrKRVlJXrGAVUqRw==
319314
dependencies:
320315
"@lezer/highlight" "^1.0.0"
321316
"@lezer/lr" "^1.0.0"
@@ -392,6 +387,11 @@
392387
dependencies:
393388
glob "7.1.7"
394389

390+
"@next/font@^13.1.1":
391+
version "13.1.1"
392+
resolved "https://registry.yarnpkg.com/@next/font/-/font-13.1.1.tgz#a0cb38bf8a181560f195d82f13f9f92fd0b0dd20"
393+
integrity sha512-amygRorS05hYK1/XQRZo5qBl7l2fpHnezeKU/cNveWU5QJg+sg8gMGkUXHtvesNKpiKIJshBRH1TzvO+2sKpvQ==
394+
395395
"@next/swc-android-arm-eabi@13.0.6":
396396
version "13.0.6"
397397
resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.0.6.tgz#c971e5a3f8aae875ac1d9fdb159b7e126d8d98d5"

0 commit comments

Comments
 (0)