cleanup, add selection color

PzYon · Aug 3, 2018 · 439015f · 439015f
1 parent 3066195
commit 439015f
Show file tree

Hide file tree

Showing 16 changed files with 83 additions and 96 deletions.
diff --git a/client/src/authentication/AuthStore.ts b/client/src/authentication/AuthStore.ts
@@ -1,5 +1,5 @@
 import { IUser } from "engraved-shared";
-import { BehaviorSubject } from "rxjs/index";
+import { BehaviorSubject } from "rxjs";
 import { LocalStorageUtil } from "../common/storage/LocalStorageUtil";
 
 export class AuthStore {

diff --git a/client/src/common/Keywords.tsx b/client/src/common/Keywords.tsx
@@ -22,15 +22,13 @@ export const Keywords: React.SFC<IKeywordsProps> = (props: IKeywordsProps) => {
   return (
     <If
       value={props.keywords}
-      render={() => {
-        return (
-          <Container className={"ngrvd-keywords"}>
-            {props.keywords.map(k => (
-              <Keyword key={k._id || k.name} keyword={k} onClick={props.onClick} />
-            ))}
-          </Container>
-        );
-      }}
+      render={() => (
+        <Container className={"ngrvd-keywords"}>
+          {props.keywords.map(k => (
+            <Keyword key={k._id || k.name} keyword={k} onClick={props.onClick} />
+          ))}
+        </Container>
+      )}
     />
   );
 };
diff --git a/client/src/common/WelcomeScreen.tsx b/client/src/common/WelcomeScreen.tsx
@@ -40,7 +40,7 @@ export const WelcomeScreen: React.SFC<{}> = () => {
         <TitleDiv>engraved.</TitleDiv>
         <MessageDiv>
           <a href={AuthenticatedServerApi.authUrl}>Login</a> or{" "}
-          <a href={AuthenticatedServerApi.authUrl}>signup</a> using your google account.
+          <a href={AuthenticatedServerApi.authUrl}>sign up</a> using your google account.
         </MessageDiv>
       </InnerDiv>
     </RootDiv>

diff --git a/client/src/common/form/Form.StyledComponents.tsx b/client/src/common/form/Form.StyledComponents.tsx
@@ -1,4 +1,3 @@
-import { ReactNode } from "react";
 import * as React from "react";
 import styled from "styled-components";
 import { StyleConstants } from "../../styling/StyleConstants";

diff --git a/client/src/common/form/fields/FieldWrapper.tsx b/client/src/common/form/fields/FieldWrapper.tsx
@@ -12,13 +12,11 @@ export interface IFieldWrapperProps {
 export const FieldWrapper: React.SFC<IFieldWrapperProps> = (props: IFieldWrapperProps) => (
   <If
     value={props.doRender}
-    render={() => {
-      return (
-        <FormLabel>
-          <FormLabelSpan>{props.label}</FormLabelSpan>
-          <FormFieldSpan>{props.children}</FormFieldSpan>
-        </FormLabel>
-      );
-    }}
+    render={() => (
+      <FormLabel>
+        <FormLabelSpan>{props.label}</FormLabelSpan>
+        <FormFieldSpan>{props.children}</FormFieldSpan>
+      </FormLabel>
+    )}
   />
 );
diff --git a/client/src/common/form/fields/Markdown.tsx b/client/src/common/form/fields/Markdown.tsx
@@ -1,6 +1,6 @@
 import * as MarkdownIt from "markdown-it";
-import { ReactNode } from "react";
 import * as React from "react";
+import { ReactNode } from "react";
 import styled from "styled-components";
 import { StyleConstants } from "../../../styling/StyleConstants";
 import { StyleUtil } from "../../../styling/StyleUtil";

diff --git a/client/src/common/form/fields/MarkdownField.tsx b/client/src/common/form/fields/MarkdownField.tsx
@@ -38,29 +38,23 @@ export class MarkdownField extends React.PureComponent<IMarkdownFieldProps, IMar
       >
         <If
           value={!this.props.isReadOnly}
-          render={() => {
-            return (
-              <TogglePreviewSpan
-                onClick={() => this.setState({ isPreview: !this.state.isPreview })}
-              >
-                {this.state.isPreview ? "Back to edit mode" : "View preview"}
-              </TogglePreviewSpan>
-            );
-          }}
+          render={() => (
+            <TogglePreviewSpan onClick={() => this.setState({ isPreview: !this.state.isPreview })}>
+              {this.state.isPreview ? "Back to edit mode" : "View preview"}
+            </TogglePreviewSpan>
+          )}
         />
         <If
           value={this.props.isReadOnly || this.state.isPreview}
           render={() => <Markdown markdown={this.props.value} />}
-          renderElse={() => {
-            return (
-              <CodeEditor
-                language={CodeLanguage.Markdown}
-                onValueChange={this.props.onValueChange}
-                value={this.props.value}
-                isReadOnly={false}
-              />
-            );
-          }}
+          renderElse={() => (
+            <CodeEditor
+              language={CodeLanguage.Markdown}
+              onValueChange={this.props.onValueChange}
+              value={this.props.value}
+              isReadOnly={false}
+            />
+          )}
         />
       </FieldWrapper>
     );

diff --git a/client/src/common/searchBox/SelectedKeywords.tsx b/client/src/common/searchBox/SelectedKeywords.tsx
@@ -3,9 +3,7 @@ import * as React from "react";
 import { Simulate } from "react-dom/test-utils";
 import styled from "styled-components";
 import { StyleConstants } from "../../styling/StyleConstants";
-import { Keyword } from "../Keyword";
 import { Keywords } from "../Keywords";
-import keyDown = Simulate.keyDown;
 
 const ContainerDiv = styled.div`
   padding: ${StyleConstants.formElementPadding};

diff --git a/client/src/index.tsx b/client/src/index.tsx
@@ -6,6 +6,11 @@ import { StyleConstants } from "./styling/StyleConstants";
 
 const injectGlobalStyles = (): void => {
   return injectGlobal`
+        ::selection {
+          color: white;
+          background: ${StyleConstants.colors.accent};
+        }
+
         body,
         html,
         input, 

diff --git a/client/src/items/IItemKindRegistration.tsx b/client/src/items/IItemKindRegistration.tsx
@@ -1,4 +1,4 @@
-import { IItem, ItemKind, IUrlItem } from "engraved-shared";
+import { IItem, ItemKind } from "engraved-shared";
 import { ReactNode } from "react";
 
 export interface IItemKindRegistration<TItemKind extends IItem = IItem> {

diff --git a/client/src/items/url/ViewUrlItem.tsx b/client/src/items/url/ViewUrlItem.tsx
@@ -2,11 +2,27 @@ import { ItemKind, IUrlItem } from "engraved-shared";
 import * as React from "react";
 import { ReactNode } from "react";
 import styled from "styled-components";
+import { If } from "../../common/If";
 import { ItemKindIcon } from "../../common/ItemKindIcon";
 import { StyleConstants } from "../../styling/StyleConstants";
 import { StyleUtil } from "../../styling/StyleUtil";
 import { IViewItemProps } from "../IViewItemProps";
 
+const IconAnchor = styled.a`
+  position: absolute;
+  background-color: ${StyleConstants.colors.ultraDiscreet};
+  color: ${StyleConstants.colors.accent};
+  height: 1.5rem;
+  left: 0.25rem;
+  top: 0.25rem;
+  opacity: 0;
+  transition: opacity 0.8s;
+  font-size: 0.7rem;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+`;
+
 const UrlInputDiv = styled.div`
   position: relative;
 `;
@@ -20,25 +36,10 @@ const UrlInput = styled.input`
   max-width: calc(100% - 2.3rem - 2px) !important;
 `;
 
-const IconAnchor = styled.a`
-  position: absolute;
-  background-color: ${StyleConstants.colors.ultraDiscreet};
-  height: 1.5rem;
-  left: 0.25rem;
-  top: 0.25rem;
-  opacity: 0;
-  transition: opacity 0.8s;
-`;
-
 const IconImage = styled.img`
   height: 1.5rem;
 `;
 
-const FallbackIconSpan = styled.span`
-  font-size: 1.4rem;
-  color: ${StyleConstants.colors.discreet};
-`;
-
 const ActionDiv = styled.div`
   ${StyleUtil.normalizeAnchors(StyleConstants.colors.accent)};
   font-size: ${StyleConstants.font.small};
@@ -75,21 +76,20 @@ export class ViewUrlItem extends React.PureComponent<IViewItemProps<IUrlItem>, I
             href={this.props.item.url}
             target="_blank"
           >
-            {!this.state.showFallbackIcon && (
-              <IconImage
-                src={this.getFaviconUrl()}
-                onLoad={() => (this.imageAnchorEl.style.opacity = "1")}
-                onError={() => {
-                  this.setState({ showFallbackIcon: true });
-                  this.imageAnchorEl.style.opacity = "1";
-                }}
-              />
-            )}
-            {this.state.showFallbackIcon && (
-              <FallbackIconSpan>
-                <ItemKindIcon itemKind={ItemKind.Url} />
-              </FallbackIconSpan>
-            )}
+            <If
+              value={!this.state.showFallbackIcon}
+              render={() => (
+                <IconImage
+                  src={this.getFaviconUrl()}
+                  onLoad={() => (this.imageAnchorEl.style.opacity = "1")}
+                  onError={() => {
+                    this.setState({ showFallbackIcon: true });
+                    this.imageAnchorEl.style.opacity = "1";
+                  }}
+                />
+              )}
+              renderElse={() => <ItemKindIcon itemKind={ItemKind.Url} />}
+            />
           </IconAnchor>
         </UrlInputDiv>
         <ActionDiv>

diff --git a/client/src/notifications/NotificationStore.ts b/client/src/notifications/NotificationStore.ts
@@ -1,4 +1,4 @@
-import { BehaviorSubject } from "rxjs/index";
+import { BehaviorSubject } from "rxjs";
 import { INotification } from "./INotification";
 
 export class NotificationStore {

diff --git a/client/src/pages/notFound/NotFoundPage.tsx b/client/src/pages/notFound/NotFoundPage.tsx
@@ -1,12 +1,9 @@
-import { IItem, IUser, Util } from "engraved-shared";
 import * as React from "react";
 import { Page } from "../Page";
 
-export const NotFoundPage: React.SFC = () => {
-  return (
-    <Page browserTitle={"Oh boy..."} title={"Oh boy..."}>
-      What you're looking for doesn't seem to exist. Either you f*cked up or the developer. Normally
-      it's the developer...
-    </Page>
-  );
-};
+export const NotFoundPage: React.SFC = () => (
+  <Page browserTitle={"Oh boy..."} title={"Oh boy..."}>
+    What you're looking for doesn't seem to exist. Either you f*cked up or the developer. Normally
+    it's the developer...
+  </Page>
+);
diff --git a/client/src/pages/search/GlobalSearchBox.tsx b/client/src/pages/search/GlobalSearchBox.tsx
@@ -1,4 +1,4 @@
-import { IKeyword, ItemKind, Util } from "engraved-shared";
+import { IKeyword, ItemKind } from "engraved-shared";
 import * as React from "react";
 import { ReactNode } from "react";
 import styled, { css } from "styled-components";

diff --git a/client/src/pages/search/results/ItemsList.tsx b/client/src/pages/search/results/ItemsList.tsx
@@ -48,17 +48,15 @@ export class ItemsList extends React.PureComponent<{}, IListOfItemsState> {
     return (
       <If
         value={this.state.items}
-        render={() => {
-          return (
-            <List>
-              {this.state.items.map((item: IItem) => (
-                <ListItem key={item._id}>
-                  <Item item={item} />
-                </ListItem>
-              ))}
-            </List>
-          );
-        }}
+        render={() => (
+          <List>
+            {this.state.items.map((item: IItem) => (
+              <ListItem key={item._id}>
+                <Item item={item} />
+              </ListItem>
+            ))}
+          </List>
+        )}
       />
     );
   }

diff --git a/client/src/pages/user/UserPage.tsx b/client/src/pages/user/UserPage.tsx
@@ -1,4 +1,4 @@
-import { IItem, IUser, Util } from "engraved-shared";
+import { IUser } from "engraved-shared";
 import * as moment from "moment";
 import * as React from "react";
 import { ReactNode } from "react";