add tringle

Author: SaraVieira

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/List.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useMemo } from 'react';
 import { Font } from '@samuelmeuli/font-manager';
-import { List, SearchFonts, FontLI, FontFamily } from './elements';
+import { List, SearchFonts, FontLI, FontFamily, Arrow } from './elements';
 
 type Props = {
   fonts: Font[];
@@ -30,27 +30,30 @@ const FontList = ({
     [fonts, searchTerm]
   );
   return (
-    <List expanded={expanded}>
-      <SearchFonts
-        type="text"
-        value={searchTerm}
-        onChange={updateSearch}
-        placeholder="Search Typefaces"
-      />
-      {getFonts.map((font: Font) => (
-        <FontLI key={font.family}>
-          <FontFamily
-            type="button"
-            id={`font-button-${getFontId(font.family)}`}
-            active={font.family === activeFontFamily}
-            onClick={onSelection}
-            onKeyPress={onSelection}
-          >
-            {font.family}
-          </FontFamily>
-        </FontLI>
-      ))}
-    </List>
+    <>
+      <Arrow />
+      <List expanded={expanded}>
+        <SearchFonts
+          type="text"
+          value={searchTerm}
+          onChange={updateSearch}
+          placeholder="Search Typefaces"
+        />
+        {getFonts.map((font: Font) => (
+          <FontLI key={font.family}>
+            <FontFamily
+              type="button"
+              id={`font-button-${getFontId(font.family)}`}
+              active={font.family === activeFontFamily}
+              onClick={onSelection}
+              onKeyPress={onSelection}
+            >
+              {font.family}
+            </FontFamily>
+          </FontLI>
+        ))}
+      </List>
+    </>
   );
 };
 

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/elements.ts

@@ -70,20 +70,9 @@ export const List = styled.ul<{ expanded?: boolean }>`
   text-align: left;
   display: none;
   margin-top: 0.5rem;
-  position: relative;
-
-  &:before {
-    content: '';
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 0 3px 6px 3px;
-    border-color: transparent transparent #007bff transparent;
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%) translateY(-100%);
-  }
+  background-color: ${props => props.theme['sideBar.background']};
+  position: absolute;
+  z-index: 10;
 
   ${props =>
     props.expanded &&
@@ -99,10 +88,7 @@ export const SelectedFont = styled.button<{ done?: boolean }>`
   color: ${props =>
     props.theme['input.foreground'] ||
     (props.theme.light ? '#636363' : 'white')};
-  border-color: ${props =>
-    Color(props.theme['input.background'])
-      .darken(props.theme.light ? 0.1 : 0.3)
-      .rgbString()};
+  border-color: ${props => makeDarker(props)};
 
   box-shadow: none;
   text-align: left;
@@ -127,3 +113,16 @@ export const SelectedFont = styled.button<{ done?: boolean }>`
       }
     `}
 `;
+
+export const Arrow = styled.div`
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 6px 6px 6px;
+  border-color: transparent transparent
+    ${props => props.theme['sideBar.background']} transparent;
+  position: absolute;
+  margin-top: 2px;
+  left: 50%;
+  margin-left: -6px;
+`;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/elements.js

@@ -2,4 +2,5 @@ import styled from 'styled-components';
 
 export const Container = styled.div`
   margin: 0.5rem 1rem;
+  position: relative;
 `;