Update company design (#4995)

* Restyle and refactor BdbDetail

* Restyle and refactor BdbDetail

* Fix semester status change

* Add icon, refactor FileUpload

* Fix import order

* Center content

* Revert global table change

* Apply changes from feedback

* Fix import order

app/components/TextWithIcon/TextWithIcon.css

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

app/components/TextWithIcon/index.tsx

@@ -1,4 +1,5 @@
 import { Flex, Icon } from '@webkom/lego-bricks';
+import cx from 'classnames';
 import Tooltip from '../Tooltip';
 import styles from './TextWithIcon.css';
 import type { ReactElement, ReactNode } from 'react';
@@ -34,7 +35,11 @@ const TextWithIcon = ({
   );
 
   return (
-    <Flex alignItems="center" gap={gap} className={className}>
+    <Flex
+      alignItems="center"
+      gap={gap}
+      className={cx(styles.overflowWrap, className)}
+    >
       {iconRight && (
         <div className={styles.textContainer}>
           <span>{content}</span>
@@ -45,7 +50,7 @@ const TextWithIcon = ({
       ) : (
         <>{icon}</>
       )}
-      <div>{iconRight ? <></> : <>{content}</>}</div>
+      {iconRight ? <></> : <>{content}</>}
     </Flex>
   );
 };

app/components/Upload/FileUpload.tsx

@@ -1,72 +1,61 @@
-import { Button } from '@webkom/lego-bricks';
-import { Component } from 'react';
-import { connect } from 'react-redux';
-import { uploadFile } from 'app/actions/FileActions';
+import { Flex, Icon } from '@webkom/lego-bricks';
+import { UploadIcon } from 'lucide-react';
+import { useState, useRef } from 'react';
+import { useAppDispatch } from 'app/store/hooks';
 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();
-  };
-  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,
-        });
-        throw error;
-      });
+const FileUpload = ({ uploadFile, onChange }: FileUploadProps) => {
+  const [pending, setPending] = useState(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const handleClick = () => {
+    inputRef.current && inputRef.current.click();
   };
 
-  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 dispatch = useAppDispatch();
 
-const mapDispatchToProps = {
-  uploadFile,
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setPending(true);
+      dispatch(
+        uploadFile({ file })
+          .then(({ meta }) => {
+            setPending(false);
+            onChange(meta.fileKey, meta.fileToken);
+          })
+          .catch((error) => {
+            setPending(false);
+            throw error;
+          }),
+      );
+    }
+  };
+
+  return (
+    <Flex justifyContent="center">
+      <Icon
+        disabled={pending}
+        name="upload"
+        iconNode={<UploadIcon size={20} />}
+        onClick={handleClick}
+      />
+      <input
+        className={styles.input}
+        onChange={handleChange}
+        type="file"
+        accept="application/pdf"
+      />
+    </Flex>
+  );
 };
-export default connect(null, mapDispatchToProps)(FileUpload);
+
+export default FileUpload;