Merge branch 'front-style'

# Conflicts:
#	front/src/components/FilesListBar/EditFileModal.tsx
#	front/src/components/FilesListBar/index.tsx
#	front/src/util/urbit.ts

front/package.json

@@ -59,6 +59,7 @@
     "remark-rehype": "^8.1.0",
     "remark-sectionize": "^1.1.1",
     "remark-wiki-link": "^1.0.4",
+    "sass": "^1.57.1",
     "slate": "^0.66.5",
     "slate-react": "^0.66.7",
     "styled-jsx": "^4.0.1",
@@ -83,6 +84,7 @@
     "word-wrap": "^1.2.3"
   },
   "devDependencies": {
+    "@types/classnames": "^2.3.1",
     "@types/d3-interpolate": "^3.0.1",
     "@types/react": "17.0.14",
     "eslint": "7.31.0",

front/src/components/Button/Button.module.scss

@@ -0,0 +1,44 @@
+.container {
+  transition: background-color .3s, border-color .3s, color .3s;
+  border-radius: 5px;
+  font-family: 'Montserrat';
+  font-weight: 500;
+  line-height: 16px;
+  text-align: center;
+  font-size: 16px;
+  padding: 13px;
+  outline: none;
+  border: 1px solid #303FC0;
+  cursor: pointer;
+
+  &:not([type="submit"]) {
+    background-color: #FCFCFC;
+    color: #303FC0;
+  }
+
+  &[type="submit"] {
+    background-color: #303FC0;
+    color: #FCFCFC;
+  }
+
+  &:not(:disabled) {
+    &:focus,
+    &:hover {
+      background-color: #8158FF;
+      border-color: #8158FF;
+      color: #FCFCFC;
+    }
+
+    &:active {
+      background-color: #303FC0;
+      border-color: #303FC0;
+    }
+  }
+
+  &:disabled {
+    background-color: #E9E9EB;
+    border-color: #E9E9EB;
+    cursor: not-allowed;
+    color: #BABABE;
+  }
+}

front/src/components/Button/index.tsx

@@ -0,0 +1,33 @@
+import { FC } from 'react';
+import cn from 'classnames';
+
+import styles from './Button.module.scss';
+
+interface ButtonProps {
+  className: string;
+  disabled?: boolean;
+  onClick: () => void;
+  type?: 'submit' | 'button';
+  text: string;
+}
+
+const Button: FC<ButtonProps> = ({
+  className,
+  disabled,
+  onClick,
+  type,
+  text,
+}) => {
+  return (
+    <button
+      className={cn(styles.container, className)}
+      disabled={disabled}
+      onClick={onClick}
+      type={type || 'button'}
+    >
+      {text}
+    </button>
+  );
+};
+
+export default Button;

front/src/components/FilesListBar/EditFileModal.module.scss

@@ -0,0 +1,5 @@
+.input {
+  &:not(:last-child) {
+    margin-bottom: 20px;
+  }
+}