Update company design

app/components/TextWithIcon/TextWithIcon.css

@@ -6,3 +6,7 @@
 .textContainer {
   width: max-content;
 }
+
+.overflowWrap {
+  overflow-wrap: anywhere;
+}

app/components/TextWithIcon/index.tsx

@@ -45,7 +45,9 @@ const TextWithIcon = ({
       ) : (
         <>{icon}</>
       )}
-      <div>{iconRight ? <></> : <>{content}</>}</div>
+      <div className={styles.overflowWrap}>
+        {iconRight ? <></> : <>{content}</>}
+      </div>
     </Flex>
   );
 };

app/components/Upload/FileUpload.tsx

@@ -1,72 +1,56 @@
-import { Button } from '@webkom/lego-bricks';
-import { Component } from 'react';
+import { Button, Icon } from '@webkom/lego-bricks';
+import { UploadIcon } from 'lucide-react';
+import { useState, useRef } from 'react';
 import { connect } from 'react-redux';
 import { uploadFile } from 'app/actions/FileActions';
 import styles from './FileUpload.css';
 
-type State = {
-  pending: boolean;
-};
-type Props = {
-  uploadFile: (arg0: { file: File }) => Promise<any>;
+type FileUploadProps = {
+  uploadFile: (arg0: { file: File }) => Promise<{
+    meta: { fileKey: string; fileToken: string };
+  }>;
   onChange: (arg0: string, arg1: string) => void;
   className?: string;
 };
 
-class FileUpload extends Component<Props, State> {
-  input: HTMLInputElement | null | undefined;
-  state = {
-    pending: false,
-  };
-  handleClick = () => {
-    this.input && this.input.click();
+const FileUpload = ({ uploadFile, onChange, className }: FileUploadProps) => {
+  const [pending, setPending] = useState(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const handleClick = () => {
+    inputRef.current && inputRef.current.click();
   };
-  handleChange = (e) => {
-    const file = e.target.files[0];
-    this.setState({
-      pending: true,
-    });
-    this.props
-      .uploadFile({
-        file,
-      })
-      .then(({ meta }) => {
-        this.setState({
-          pending: false,
-        });
-        this.props.onChange(meta.fileKey, meta.fileToken);
-      })
-      .catch((error) => {
-        this.setState({
-          pending: false,
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setPending(true);
+      uploadFile({ file })
+        .then(({ meta }) => {
+          setPending(false);
+          onChange(meta.fileKey, meta.fileToken);
+        })
+        .catch((error) => {
+          setPending(false);
+          throw error;
         });
-        throw error;
-      });
+    }
   };
 
-  render() {
-    return (
-      <div>
-        <Button
-          isPending={this.state.pending}
-          onPress={this.handleClick}
-          className={this.props.className}
-        >
-          Last opp fil
-        </Button>
-        <input
-          ref={(ref) => (this.input = ref)}
-          className={styles.input}
-          onChange={this.handleChange}
-          type="file"
-          accept="application/pdf"
-        />
-      </div>
-    );
-  }
-}
-
-const mapDispatchToProps = {
-  uploadFile,
+  return (
+    <div>
+      <Button isPending={pending} onPress={handleClick} className={className}>
+        <Icon name="upload" iconNode={<UploadIcon size={24} />} />
+      </Button>
+      <input
+        ref={inputRef}
+        className={styles.input}
+        onChange={handleChange}
+        type="file"
+        accept="application/pdf"
+      />
+    </div>
+  );
 };
-export default connect(null, mapDispatchToProps)(FileUpload);
+
+export default connect(null, { uploadFile })(FileUpload);