Rename main folders and write sql backend adaptor

frontend/src/components/TranslateDialog/TranslateDialog.jsx

@@ -0,0 +1,32 @@
+import { Button } from '/src/components'
+
+import { useTranslateStore } from '/src/stores'
+
+import {
+  Wrapper,
+  ButtonWrapper,
+} from './TranslateDialog.styles'
+
+const TranslateDialog = () => {
+  const navigatorLang = useTranslateStore(state => state.navigatorLang)
+  const setDialogDismissed = useTranslateStore(state => state.setDialogDismissed)
+
+  return (
+    <Wrapper>
+      <div>
+        <h2>Translate Crab Fit</h2>
+        <p>Crab Fit hasn't been translated to your language yet.</p>
+      </div>
+      <ButtonWrapper>
+        <Button
+          target="_blank"
+          rel="noreferrer noopener"
+          href={`https://docs.google.com/forms/d/e/1FAIpQLSd5bcs8LTP_8Ydrh2e4iMlZft5x81qSfAxekuuQET27A2mBhA/viewform?usp=pp_url&entry.1530835706=__other_option__&entry.1530835706.other_option_response=${encodeURIComponent(navigatorLang)}`}
+        >Help translate!</Button>
+        <Button secondary onClick={() => setDialogDismissed(true)}>Close</Button>
+      </ButtonWrapper>
+    </Wrapper>
+  )
+}
+
+export default TranslateDialog

frontend/src/components/TranslateDialog/TranslateDialog.styles.js

@@ -0,0 +1,47 @@
+import { styled } from 'goober'
+
+export const Wrapper = styled('div')`
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  background-color: var(--background);
+  border: 1px solid var(--surface);
+  z-index: 900;
+  padding: 20px;
+  border-radius: 3px;
+  box-sizing: border-box;
+  width: 500px;
+  max-width: calc(100% - 40px);
+  box-shadow: 0 3px 6px 0 rgba(0,0,0,.3);
+  display: flex;
+  align-items: center;
+
+  & h2 {
+    margin: 0;
+    font-size: 1.3rem;
+  }
+  & p {
+    margin: 12px 0 0;
+    font-size: 1rem;
+  }
+
+  @media (max-width: 400px) {
+    display: block;
+  }
+`
+
+export const ButtonWrapper = styled('div')`
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-end;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-left: 20px;
+  white-space: nowrap;
+
+  @media (max-width: 400px) {
+    margin: 20px 0 0;
+    white-space: normal;
+  }
+`