fix: Adjustment on Create Post to Timeline (#1824)

* fix: set debio tips (#1753)

feat: set debio tips

* chore(deps): bump google-github-actions/release-please-action from 3.7.4 to 3.7.5 (#1754)

chore(deps): bump google-github-actions/release-please-action

Bumps [google-github-actions/release-please-action](https://github.com/google-github-actions/release-please-action) from 3.7.4 to 3.7.5.
- [Release notes](https://github.com/google-github-actions/release-please-action/releases)
- [Changelog](https://github.com/google-github-actions/release-please-action/blob/main/CHANGELOG.md)
- [Commits](google-github-actions/release-please-action@d3c71f9...e0b9d18)

---
updated-dependencies:
- dependency-name: google-github-actions/release-please-action
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* fix: adjustment view on direclty post to timeline

* fix: adjustment view on direclty post to timeline

* fix: adjustment view on direclty post to timeline

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Kristian Ruben <56469224+rubenkristian@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

src/components/ExperienceList/ExperienceListBarCreatePost.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { Experience as ExperienceCard } from '../ExpericenceRightBar';
+import { Experience as ExperienceCard } from '../ExperienceTimelineCard';
 import { useStyles } from './ExperienceList.style';
 
 import { WrappedExperience } from 'src/interfaces/experience';

src/components/ExperienceTimelineCard/Experience.skeleton.tsx

@@ -0,0 +1,36 @@
+import Card from '@material-ui/core/Card';
+import Grid from '@material-ui/core/Grid';
+import BaseSekeleton from '@material-ui/lab/Skeleton';
+
+export const Skeleton = ({ menuDrawer = false }: { menuDrawer?: boolean }) => {
+  return (
+    <Card
+      style={{
+        padding: menuDrawer ? '5px 10px' : 20,
+        borderRadius: 10,
+        marginBottom: menuDrawer ? 10 : 30,
+        width: '100%',
+      }}>
+      <Grid
+        container
+        direction="row"
+        style={{ width: '100%' }}
+        alignItems="center">
+        <BaseSekeleton
+          variant="rect"
+          width={menuDrawer ? 40 : 68}
+          height={menuDrawer ? 40 : 68}
+        />
+
+        <Grid
+          item
+          container
+          direction="column"
+          style={{ marginLeft: 20, width: 'calc(100% - 88px)' }}>
+          <BaseSekeleton variant="text" width={'100%'} height={24} />
+          <BaseSekeleton variant="text" width={'50%'} height={16} />
+        </Grid>
+      </Grid>
+    </Card>
+  );
+};

src/components/ExperienceTimelineCard/Experience.style.ts

@@ -0,0 +1,123 @@
+import {
+  alpha,
+  createStyles,
+  makeStyles,
+  Theme,
+} from '@material-ui/core/styles';
+
+type ExperienceStyleProps = {
+  selected: boolean;
+  selectable: boolean;
+  menuDrawer: boolean;
+};
+
+export const useStyles = makeStyles<Theme, ExperienceStyleProps>(theme =>
+  createStyles({
+    root: {
+      marginBottom: theme.spacing(1),
+      border: '1px solid',
+      borderColor: props => (props.selected ? '#6E3FC3' : '#FFF'),
+      borderRadius: 10,
+      padding: props => (props.menuDrawer ? '5px 10px' : 20),
+      width: '100%',
+      boxShadow: `0px 2px 10px rgba(0, 0, 0, 0.05)`,
+      position: 'relative',
+
+      '&:hover': {
+        backgroundColor: alpha('#FFC857', 0.15),
+        borderColor: props => (props.selected ? '#6E3FC3' : 'transparent'),
+
+        '& .MuiCardActionArea-focusHighlight': {
+          opacity: 0,
+        },
+
+        '&::before': {
+          backgroundColor: props =>
+            props.selected ? '#6E3FC3' : 'transparent',
+        },
+      },
+
+      '&::before': {
+        content: '""',
+        position: 'absolute',
+        width: 8,
+        top: 0,
+        left: 0,
+        height: '100%',
+        backgroundColor: props => (props.selected ? '#6E3FC3' : '#FFF'),
+        borderTopLeftRadius: 10,
+        borderBottomLeftRadius: 10,
+      },
+    },
+    image: {
+      width: props => (props.menuDrawer ? 40 : 68),
+      height: props => (props.menuDrawer ? 40 : 68),
+      opacity: 0.9,
+      borderRadius: 5,
+    },
+    cardContent: {
+      width: 140,
+      padding: '0px 0px 0px 20px',
+      flexGrow: 1,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+
+      '&:last-child': {
+        paddingBottom: 0,
+      },
+    },
+    title: {
+      wordBreak: 'break-word',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      [theme.breakpoints.down('xs')]: {
+        fontSize: '14px',
+      },
+    },
+    subtitle: {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      [theme.breakpoints.down('xs')]: {
+        fontSize: '12px',
+        fontWeight: 500,
+      },
+    },
+    icon: {
+      [theme.breakpoints.down('xs')]: {
+        color: '#404040',
+      },
+    },
+    menu: {
+      borderRadius: 10,
+      marginTop: 8,
+    },
+    delete: {
+      color: '#FE3636',
+    },
+    error: {
+      background: '#FE3636',
+      color: '#FFF',
+      '&:hover': {
+        color: theme.palette.text.primary,
+      },
+    },
+    modal: {
+      paddingBottom: 10,
+    },
+    input: {
+      width: 560,
+      marginBottom: 0,
+      marginTop: 10,
+
+      '& .MuiInputLabel-root, .MuiInputBase-root': {
+        color: '#616161',
+      },
+      [theme.breakpoints.down('xs')]: {
+        width: '100%',
+      },
+    },
+  }),
+);