Feature/UI fixes icon changes

client/package.json

@@ -39,6 +39,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@fontsource/montserrat": "^4.5.14",
+    "@fontsource/nunito": "^5.0.19",
     "@fontsource/open-sans": "^4.5.14",
     "@fontsource/roboto": "^4.5.8",
     "@mui/icons-material": "^5.15.14",

client/src/admin.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import AdminApplication from '@src/components/admin/AdminApplication';
-import '@fontsource/roboto/300.css';
-import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/700.css';
+import '@fontsource/nunito/300.css';
+import '@fontsource/nunito/400.css';
+import '@fontsource/nunito/500.css';
+import '@fontsource/nunito/700.css';
 
 document.addEventListener('DOMContentLoaded', () => {
   ReactDOM.render(

client/src/components/ListItemLink.tsx

@@ -1,5 +1,5 @@
 import { Link, ListItem } from '@mui/material';
-import { OpenInNew } from '@mui/icons-material';
+import OpenInNewIcon from '@src/components/icons/OpenInNewIcon';
 import { makeStyles } from '@mui/styles';
 import React, { ReactNode } from 'react';
 import { NavLink } from 'react-router-dom';
@@ -39,7 +39,7 @@ export default function ListItemLink(props: Props) {
         : {})}
     >
       {props.children}
-      {props.newTab && <OpenInNew />}
+      {props.newTab && <OpenInNewIcon />}
     </ListItem>
   );
 }

client/src/components/admin/AddSurveySectionActions.tsx

@@ -311,6 +311,7 @@ export default function AddSurveySectionActions(props: Props) {
                     onClick={handleAdd(button.type)}
                     disabled={props.disabled}
                     style={{ minWidth: '40px' }}
+                    sx={{boxShadow: 'none'}}
                   >
                     {button.icon}
                   </Fab>
@@ -333,6 +334,7 @@ export default function AddSurveySectionActions(props: Props) {
                     size="small"
                     onClick={handleAdd(button.type)}
                     disabled={props.disabled}
+                    sx={{boxShadow: 'none'}}
                   >
                     {button.icon}
                   </Fab>
@@ -348,6 +350,7 @@ export default function AddSurveySectionActions(props: Props) {
                   color="secondary"
                   aria-label={'attach-section-from-clipboard'}
                   size="small"
+                  sx={{boxShadow: 'none'}}
                   onClick={() => {
                     // Copy content from Clipboard context to active survey
                     if (clipboardSection) {

client/src/components/admin/AdminAppBar.tsx

@@ -12,8 +12,8 @@ import SurveyLanguageMenu from '../SurveyLanguageMenu';
 import LanguageMenu from '../LanguageMenu';
 import { AdminInstructionButton } from './AdminInstructionButton';
 import AppBarUserMenu from './AppBarUserMenu';
-import { useTranslations } from '@src/stores/TranslationContext';
 import { NavLink } from 'react-router-dom';
+import KartallaLogo from '@src/components/icons/KartallaLogo';
 
 interface Props {
   labels?: string[];
@@ -26,8 +26,6 @@ export function AdminAppBar({
   withHomeLink = true,
   style = {},
 }: Props) {
-  const { tr } = useTranslations();
-
   return (
     <>
       <AppBar position="fixed">
@@ -41,7 +39,7 @@ export function AdminAppBar({
                 padding: '0',
               },
               'li+li::before': {
-                content: '" - "',
+                content: '" • "',
                 padding: '0px 10px',
                 lineHeight: 1.6,
                 fontSize: '1.25rem',
@@ -63,7 +61,7 @@ export function AdminAppBar({
                     },
                   }}
                 >
-                  {tr.SurveyList.title.main}
+                  <KartallaLogo/>
                 </Typography>
               </ListItem>
             )}

client/src/components/admin/EditGroupedCheckBoxQuestion.tsx

@@ -248,6 +248,7 @@ export default function EditGroupedCheckBoxQuestion({
           disabled={disabled}
           aria-label="add-checkbox-group"
           size="small"
+          sx={{boxShadow: 'none'}}
           onClick={() => {
             // Add a temporary new ID for the group
             const id =
@@ -258,7 +259,7 @@ export default function EditGroupedCheckBoxQuestion({
                 ...section.groups,
                 {
                   id,
-                  name: { fi: '', en: '' },
+                  name: { fi: '', se: '', en: '' },
                   options: [],
                 },
               ],

client/src/components/admin/EditMatrixQuestion.tsx

@@ -48,6 +48,7 @@ export default function EditMatrixQuestion({ section, onChange }: Props) {
             color="primary"
             aria-label="add-matrix-class"
             size="small"
+            sx={{boxShadow: 'none'}}
             onClick={() => {
               onChange({
                 ...section,

client/src/components/admin/EditMultiMatrixQuestion.tsx

@@ -99,6 +99,7 @@ export function EditMultiMatrixQuestion({
             color="primary"
             aria-label="add-matrix-class"
             size="small"
+            sx={{boxShadow: 'none'}}
             onClick={() => {
               onChange({
                 ...section,

client/src/components/admin/EditSurveySideBar.tsx

@@ -16,10 +16,10 @@ import ChevronLeftIcon from '@src/components/icons/ChevronLeftIcon';
 import AddIcon from '@src/components/icons/AddIcon';
 import DraggableIcon from '@src/components/icons/DraggableIcon';
 import FavoriteIcon from '@src/components/icons/FavoriteIcon';
-import QuestionmarkSmallIcon from '@src/components/icons/QuestionmarkSmallIcon';
+import SurveyPageIcon from '@src/components/icons/SurveyPageIcon';
 import VisibleIcon from '@src/components/icons/VisibleIcon';
 import ClipboardIcon from '@src/components/icons/ClipboardIcon';
-import ClipboardPasteIcon from '@src/components/icons/ClipboardPasteIcon';
+import DocumentCopyIcon from '@src/components/icons/DocumentCopyIcon';
 import BranchIcon from '@src/components/icons/BranchIcon';
 
 import { makeStyles } from '@mui/styles';
@@ -150,7 +150,7 @@ export default function EditSurveySideBar(props: Props) {
                             {Object.keys(page?.conditions)?.length > 0 && (
                               <BranchIcon />
                             )}
-                            <QuestionmarkSmallIcon />
+                            <SurveyPageIcon /> 
                           </ListItemIcon>
                           <ListItemText
                             primary={
@@ -194,10 +194,12 @@ export default function EditSurveySideBar(props: Props) {
                               });
                             }}
                           >
-                            <ClipboardIcon />
+                            <DocumentCopyIcon />
                           </IconButton>
                           <div {...provided.dragHandleProps}>
+                          <IconButton>
                             <DraggableIcon />
+                          </IconButton>
                           </div>
                         </ListItemLink>
                       </div>
@@ -280,7 +282,7 @@ export default function EditSurveySideBar(props: Props) {
               }
             }}
           >
-            <ClipboardPasteIcon />
+            <ClipboardIcon />
             {tr.EditSurvey.attachNewPage}
           </ListItemButton>
         </div>

client/src/components/admin/InstructionsDialog.tsx

@@ -7,7 +7,6 @@ import {
   Button,
   Typography,
 } from '@mui/material';
-import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
 import PaperclipIcon from '@src/components/icons/PaperclipIcon';
 import { useToasts } from '@src/stores/ToastContext';
 import DropZone from '../DropZone';

client/src/components/admin/KeyValueForm.tsx

@@ -90,6 +90,7 @@ export default function KeyValueForm({ label, value, onChange }: Props) {
           aria-label="add-key-value-pair"
           size="small"
           style={{ margin: '1rem 0' }}
+          sx={{boxShadow: 'none'}}
           onClick={() => {
             onChange([
               ...value,

client/src/components/admin/QuestionOptions.tsx

@@ -124,6 +124,7 @@ export default function QuestionOptions({
           disabled={disabled}
           aria-label="add-question-option"
           size="small"
+          sx={{boxShadow: 'none'}}
           onClick={() => {
             onChange([...options, { text: initializeLocalizedObject('') }]);
           }}

client/src/components/admin/SurveySectionAccordion/SurveySectionAccordion.tsx

@@ -29,7 +29,7 @@ import PaperclipIcon from '@src/components/icons/PaperclipIcon';
 import SliderIcon from '@src/components/icons/SliderIcon';
 import TextSectionIcon from '@src/components/icons/TextSectionIcon';
 import DraggableIcon from '@src/components/icons/DraggableIcon';
-import ClipboardIcon from '@src/components/icons/ClipboardIcon';
+import DocumentCopyIcon from '@src/components/icons/DocumentCopyIcon';
 import ChevronDownIcon from '@src/components/icons/ChevronDownIcon';
 import {
   Accordion,
@@ -342,11 +342,11 @@ export default function SurveySectionAccordion(props: Props) {
                 });
               }}
             >
-              <ClipboardIcon />
+              <DocumentCopyIcon htmlColor='#000000DD' />
             </IconButton>
           )}
           <div {...props.provided.dragHandleProps} style={{ display: 'flex' }}>
-            <DraggableIcon />
+            <DraggableIcon color='disabled'/>
           </div>
         </AccordionSummary>
         <SectionDetails

client/src/components/icons/DocumentCopyIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+export default function DocumentCopyIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M2.16193 3.6478V2.0072C2.16193 1.45491 2.60964 1.0072 3.16193 1.0072H4.34279M2.16193 8.27665V11.5775M7.49192 1.0072H9.5787M2.16193 16.0546V17.7407C2.16193 18.293 2.60964 18.7407 3.16193 18.7407H4.57044M12.8796 1.0072H14.0113C14.3626 1.0072 14.6882 1.19156 14.8689 1.49286L15.7715 2.9978M8.76617 22.993H19.8381C20.9426 22.993 21.8381 22.0975 21.8381 20.993V9.80867C21.838 9.46223 21.7004 9.12998 21.4555 8.88492L18.9527 6.38209C18.7076 6.1372 18.3754 5.9996 18.0289 5.99952H8.76617C8.41949 5.99952 8.087 6.13724 7.84185 6.38239C7.59671 6.62753 7.45898 6.96002 7.45898 7.30671V21.6858C7.45898 22.0325 7.59671 22.365 7.84185 22.6101C8.087 22.8553 8.41949 22.993 8.76617 22.993Z"
+          stroke="currentColor"
+          fill="none"
+          strokeOpacity="1"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </SvgIcon>
+  );
+}

client/src/components/icons/KartallaLogo.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+export default function KartallaLogo() {
+  return (
+    <svg
+      width="273"
+      height="45"
+      viewBox="0 0 273 45"
+      fill="none"
+      stroke="white"
+      strokeWidth="3.03704"
+      strokeMiterlimit="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_1227_158)">
+        <path d="M2 6C2 3.79086 3.79086 2 6 2H39C41.2091 2 43 3.79086 43 6V23C43 34.0457 34.0457 43 23 43H22C10.9543 43 2 34.0457 2 23V6Z" fill="#00BFAB" />
+        <path fillRule="evenodd" clipRule="evenodd" d="M39.2261 2.00073C40.2124 2.00073 41.1567 2.39256 41.8553 3.09018C42.5538 3.7878 42.9435 4.73424 42.9435 5.72086V22.473C42.9435 27.9025 40.788 33.1096 36.9489 36.9487C33.1094 40.7879 27.9026 42.9449 22.4731 42.9449H22.4725C17.0429 42.9449 11.8358 40.7879 7.9967 36.9487C4.15756 33.1096 2.00085 27.9025 2.00085 22.473V5.72086C2.00085 4.73424 2.39267 3.7878 3.09029 3.09018C3.78791 2.39256 4.73436 2.00073 5.72098 2.00073H39.2261Z" fill="#00BFAB" strokeWidth="2" />
+        <path fillRule="evenodd" clipRule="evenodd" d="M22 30H17V8H46.5V30H35C32.521 34.371 27.384 37 22 37V30Z" fill="#009A89" strokeWidth="4" strokeLinejoin="round" />
+      </g>
+      <path d="M2 6C2 3.79086 3.79086 2 6 2H39C41.2091 2 43 3.79086 43 6V23C43 34.0457 34.0457 43 23 43H22C10.9543 43 2 34.0457 2 23V6Z" strokeWidth="2" />
+      <g clipPath="url(#clip1_1227_158)">
+        <path d="M58.5902 9.99768V33.7744L82.3669 9.99768" />
+        <path d="M108.464 33.7739V13.5383C108.464 12.2771 107.704 11.14 106.539 10.6572C105.374 10.1747 104.033 10.4414 103.141 11.3333C95.0783 19.3955 80.7002 33.7739 80.7002 33.7739" />
+        <path d="M190.314 33.7739V13.5383C190.314 12.2771 189.554 11.14 188.389 10.6572C187.223 10.1747 185.882 10.4414 184.99 11.3333C176.928 19.3955 162.55 33.7739 162.55 33.7739" />
+        <path d="M268.804 33.7739V13.5383C268.804 12.2771 268.044 11.14 266.879 10.6572C265.714 10.1747 264.373 10.4414 263.481 11.3333C255.418 19.3955 241.04 33.7739 241.04 33.7739" />
+        <path d="M108.526 24.7881L98.2747 24.7881" />
+        <path d="M80.641 33.8162L69.814 22.9891" />
+        <path d="M139.638 33.8162L130.689 24.8672" />
+        <path d="M190.314 24.7881L180.062 24.7881" />
+        <path d="M268.805 24.7881L258.553 24.7881" />
+        <path d="M154.33 33.7737V9.99701H143.793" />
+        <path d="M118.677 33.7737V9.99701H129.214" />
+        <path d="M129.216 9.99731C133.301 9.99731 136.61 13.3093 136.61 17.394C136.61 21.4787 133.301 24.7878 129.216 24.7878H124.735" />
+        <path d="M202.09 9.99768V33.7744H217.769" />
+        <path d="M225.363 9.99768V33.7744H241.041" />
+        <path d="M164.866 9.99707L154.33 9.99707" />
+      </g>
+      <defs>
+        <clipPath id="clip0_1227_158">
+          <path d="M2 6C2 3.79086 3.79086 2 6 2H39C41.2091 2 43 3.79086 43 6V23C43 34.0457 34.0457 43 23 43H22C10.9543 43 2 34.0457 2 23V6Z" fill="white" />
+        </clipPath>
+        <clipPath id="clip1_1227_158">
+          <rect width="214.111" height="30.0507" fill="white" transform="translate(56.6666 8.0741)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+

client/src/components/icons/OpenInNewIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+export default function OpenInNewIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M6 1H2C1.44772 1 1 1.44772 1 2V12C1 12.5523 1.44772 13 2 13H12C12.5523 13 13 12.5523 13 12V8M9 1H13M13 1V5M13 1L7 7"
+          stroke="currentColor"
+          fill="none"
+          strokeOpacity="1"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </SvgIcon>
+  );
+}

client/src/components/icons/SurveyPageIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+export default function SurveyPageIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <svg fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M15.0735 1.99997C14.752 1.67848 14.3159 1.49787 13.8613 1.49787L4.21215 1.49786C3.75749 1.49786 3.32146 1.67848 2.99997 1.99997C2.67849 2.32146 2.49787 2.75749 2.49787 3.21215L2.49778 20.7878C2.49778 21.2424 2.6784 21.6785 2.99988 22C3.32138 22.3214 3.7574 22.5021 4.21207 22.5021L19.7877 22.5C20.2424 22.5 20.6785 22.3193 20.9999 21.9979C21.3213 21.6764 21.502 21.2403 21.502 20.7857L21.5021 8.71214C21.5021 8.2575 21.3214 7.82145 20.9999 7.49997M15.0735 1.99997L20.9999 7.49997M15.0735 1.99997C15.4735 2.39997 15.5244 2.8333 15.4999 2.99997V6.49997H18.9999C19.9999 6.49997 20.5999 7.09997 20.9999 7.49997M12.8571 11.5H17.1428M12.8571 17.5H17.1428M6.3281 17.2064L7.76448 18.6428L10.1585 15.2913M6.3281 11.1791L7.76448 12.6155L10.1585 9.26389"
+          stroke="currentColor"
+          fill="none"
+          strokeOpacity="1"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </SvgIcon>
+  );
+}

client/src/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Application from '@src/components/Application';
-import '@fontsource/roboto/300.css';
-import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/700.css';
+import '@fontsource/nunito/300.css';
+import '@fontsource/nunito/400.css';
+import '@fontsource/nunito/500.css';
+import '@fontsource/nunito/700.css';
 
 document.addEventListener('DOMContentLoaded', () => {
   ReactDOM.render(