diff --git a/.htaccess b/.htaccess new file mode 100644 index 0000000..e69de29 diff --git a/lib/components/QuickSettings.tsx b/lib/components/QuickSettings.tsx index a003e74..0daf78a 100644 --- a/lib/components/QuickSettings.tsx +++ b/lib/components/QuickSettings.tsx @@ -83,6 +83,7 @@ interface QuickSettingsProps { handleScoreCategorySettingsChange: (settings: AllScoreCategorySettings) => void; threshold: number; handleDisplayThresholdChange: (threshold: number) => void; + fakeSetAsDefault: () => void; handleReset: () => void; } @@ -178,6 +179,14 @@ export default function QuickSettings(props: QuickSettingsProps): JSX.Element { +
+ +
+ ); } diff --git a/pages/index.tsx b/pages/index.tsx index d3c03e6..5ccad37 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -26,13 +26,19 @@ const DEFAULT_CATEGORY_SETTINGS: AllScoreCategorySettings = { [ScoreCategory.insult]: { enabled: true, weight: 0.5 }, }; +const FAKE_DEFAULT_CATEGORY_SETTINGS: AllScoreCategorySettings = { + [ScoreCategory.toxic]: { enabled: true, weight: 0.2 }, + [ScoreCategory.profane]: { enabled: true, weight: 0.2 }, + [ScoreCategory.threat]: { enabled: false, weight: 0.5 }, + [ScoreCategory.insult]: { enabled: true, weight: 0.9 }, +}; + export default function Home() { const textareaRef = useRef(null); const [userInput, setUserInput] = useState(""); const [textFromLastUpdate, setTextFromLastUpdate] = useState(""); const [suggestedEdit, setSuggestedEdit] = useState(""); - // Settings const [summaryScoreMode, setSummaryScoreMode] = useState(SummaryScoreMode.highest); const [allCategorySettings, setAllCategorySettings] = useState(DEFAULT_CATEGORY_SETTINGS); @@ -90,6 +96,10 @@ export default function Home() { setSuggestedEdit(suggestionText); }; + const fakeUserDefault = () => { + setAllCategorySettings(FAKE_DEFAULT_CATEGORY_SETTINGS); + }; + /* Automatically fetch the score based on the interval if the text changes. * Sets: scores, textFromLastUpdate */ @@ -138,6 +148,11 @@ export default function Home() {

Toxicity Bot

+
+

Taylor123

+ +
+
@@ -174,6 +189,7 @@ export default function Home() { handleScoreCategorySettingsChange={(newSettings) => setAllCategorySettings(newSettings)} threshold={scoreThreshold} handleDisplayThresholdChange={(newThreshold) => setScoreThreshold(newThreshold)} + fakeSetAsDefault={fakeUserDefault} handleReset={resetQuickSettings} />
diff --git a/pages/login.tsx b/pages/login.tsx new file mode 100644 index 0000000..78e2e1b --- /dev/null +++ b/pages/login.tsx @@ -0,0 +1,33 @@ +import Head from "next/head"; + +import styles from "@/styles/Login.module.scss"; + +export default function Login() { + return <> + + Toxicity Bot + + + + + +
+

Login

+
+ + +
+ Username + +
+
+ Password + +
+ + + +
+
+ ; +} diff --git a/public/profile.png b/public/profile.png new file mode 100644 index 0000000..803f37d Binary files /dev/null and b/public/profile.png differ diff --git a/styles/Home.module.scss b/styles/Home.module.scss index c7b2d9d..c9c9fd5 100644 --- a/styles/Home.module.scss +++ b/styles/Home.module.scss @@ -11,12 +11,29 @@ gap: 30px; } +.login { + grid-area: account; + display: flex; + margin: 0; +} +.username { + margin-right: 20px; + margin-bottom: 5px; + margin-top: 8px; +} + .header { grid-area: header; margin-bottom: 0; text-align: center; } +.profilePic { + height: 50px; + width: 50px; + align-items: center; +} + .inputForm { display: flex; grid-area: input; diff --git a/styles/Login.module.scss b/styles/Login.module.scss new file mode 100644 index 0000000..d9adfae --- /dev/null +++ b/styles/Login.module.scss @@ -0,0 +1,76 @@ +@import "mixins"; + +.container { + margin: auto; + + display: grid; + grid-template-rows: auto; + grid-template-columns: 1fr minmax(auto, 750px) 1fr; + grid-template-areas: + ". header ." + ". login ." + ". login ."; + gap: 30px; + width: 500px; +} + +.header { + grid-area: header; + margin-bottom: 0; + text-align: center; +} + + +.inputForm { + display: flex; + flex-direction: column; + gap: 10px; + box-sizing: border-box; + height: 100%; + + &__textarea { + flex-grow: 1; + box-sizing: border-box; + max-width: 750px; + resize: vertical; + } +} + +.login { + grid-area: login; +} + +.labeledInput { + display: flex; + flex-direction: row; + + & > .label { + text-align: center; + display: inline-block; + border: 1px solid white; + border-radius: 12px 0px 0px 12px; + background: var(--color-light); + background-image: $backgroundSurfaceOverlayInset; + padding: 5px; + color: var(--color-on-surface); + font-size: 1.2rem; + } + + & > input { + width: 100%; + transition: box-shadow 0.3s ease-in-out; + box-shadow: makeShadow($lightOffset: -5px, $shadowOffset: 4px, $isInset: true); + border: none; + border-radius: 0px 12px 12px 0px; + background: var(--color-surface); + background-image: $backgroundSurfaceOverlayInset; + padding: 5px; + color: var(--color-on-surface); + font-size: 1rem; + } + + &input:focus { + outline: none; + box-shadow: makeShadow($lightOffset: -2px, $shadowOffset: 2px, $isInset: true); + } +}