Merge pull request #367 from lara-learning/fix/cb-distance-to-day

fix: change distance & fix checkbox hover

Author: Julian-Wogersien

packages/components/src/day-input-layout.tsx

@@ -12,9 +12,10 @@ const DayInputContainer = styled.div.withConfig({
 
 const DayInputHeaderContainer = styled.div`
   padding: 0 ${Spacings.l};
-  display: flex;
+  display: grid;
   justify-content: space-between;
   align-items: center;
+  grid-template-columns: 40% 26% 33%;
 `
 
 const DayStatusContainer = styled.div`

packages/components/src/icons/checkboxSquare.tsx

@@ -3,7 +3,6 @@ import React from 'react'
 export const IconCheckboxSquare: React.FC = () => {
   return (
     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-      <title>checkboxSquare</title>
       <path
         d="M15.9997 7.33325H7.99967C7.63101 7.33325 7.33301 7.63125 7.33301 7.99992V15.9999C7.33301 16.3686 7.63101 16.6666 7.99967 16.6666H15.9997C16.3683 16.6666 16.6663 16.3686 16.6663 15.9999V7.99992C16.6663 7.63125 16.3683 7.33325 15.9997 7.33325ZM15.333 15.3333H8.66634V8.66659H15.333V15.3333Z"
         id="box"

packages/components/src/select.tsx

@@ -20,6 +20,7 @@ export interface SelectWithIconContainerProps {
 }
 
 export const StyledSelectLabel = styled.label`
+  justify-self: end;
   color: ${(props) => props.theme.mediumFont};
   font-size: ${FontSizes.copy};
   font-weight: 600;

packages/frontend/src/components/day-input.tsx

@@ -33,6 +33,21 @@ const SecondaryWrapper = styled.div`
   align-items: center;
 `
 
+const Text = styled.p`
+  letter-spacing: 0.9px;
+  margin: 0;
+  padding: 0;
+  font-size: 13px;
+  font-weight: bold;
+  white-space: pre-wrap;
+  word-break: break-word;
+`
+
+const CBWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`
+
 export interface EntryStatusType {
   message?: string
   type: string
@@ -244,7 +259,10 @@ const DayInput: React.FunctionComponent<DayInputProps> = ({
       inputHeader={
         <>
           <InputHeading noMargin>{getHeading()}</InputHeading>
-          <CheckBox disabled={!!disabled} iconName={'Checkbox'} checked={halfDays} onClick={checkBox} />
+          <CBWrapper>
+            <CheckBox disabled={!!disabled} iconName={'Checkbox'} checked={halfDays} onClick={checkBox} />
+            <Text>{strings.report.halfDays}</Text>
+          </CBWrapper>
           {day && <DayStatusSelect disabled={disabled} day={day} secondary={false} />}
         </>
       }

packages/frontend/src/locales/de.ts

@@ -84,6 +84,7 @@ const germanTranslation: Translation = {
     handoverTitle: 'Bericht übergeben',
     handoverNotificationText: 'Dein Bericht wurde übergeben und wird jetzt geprüft.',
     accept: 'Bericht genehmigen',
+    halfDays: 'Halbe Tage',
     decline: 'Bericht zurückgeben',
     archived: 'Archiviert',
     department: {

packages/frontend/src/locales/en.ts

@@ -82,6 +82,7 @@ const englishTranslation: Translation = {
     handoverNotificationText: 'Your report was handed over and is now being checked.',
     accept: 'Approve this report',
     decline: 'Hand back to trainee',
+    halfDays: 'Half Days',
     archived: 'Archived',
     department: {
       title: 'Department',

packages/frontend/src/locales/translation.ts

@@ -80,6 +80,7 @@ export default interface Translation {
     decline: string
     archived: string
     unarchive: string
+    halfDays: string
     department: {
       title: string
       departmentAddedTitle: string