Start switching from styled-components to scss to support theming

package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "azure-devops-extension-api": "1.143.0",
     "azure-devops-extension-sdk": "2.0.3",
-    "azure-devops-ui": "^1.143.0",
+    "azure-devops-ui": "1.143.1",
     "immer": "^1.3.1",
     "office-ui-fabric-react": "6.105.0",
     "prop-types": "^15.6.2",
@@ -39,7 +39,7 @@
     "@types/react-router-dom": "^4.2.7",
     "base64-inline-loader": "^1.1.1",
     "node-sass": "^4.10.0",
-    "react-scripts-azure-devops": "file:../../repos/create-react-app/packages/react-scripts",
+    "@cschleiden/azure-devops-react-scripts": "2.1.1",
     "tfx-cli": "0.6.3",
     "typescript": "^3.1.6"
   },

src/App.tsx

@@ -1,4 +1,5 @@
 import { IHostNavigationService } from "azure-devops-extension-api";
+import "azure-devops-ui/FabricInit";
 import * as DevOps from "azure-devops-extension-sdk";
 import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
 import * as React from "react";

src/components/buttons.tsx

@@ -3,25 +3,22 @@ import { IMenuButtonProps, MenuButton } from "azure-devops-ui/Menu";
 import * as React from "react";
 import styled from "../styles/themed-styles";
 
-export const DefaultButton = styled((props: IButtonProps) => (
-  <Button {...props} />
-))`
-  border-radius: 2px;
-`;
+export const DefaultButton = (props: IButtonProps) => <Button {...props} />;
 
-export const PrimaryButton = styled((props: IButtonProps) => (
+export const PrimaryButton = (props: IButtonProps) => (
   <Button {...props} primary />
-))`
-  border-radius: 2px;
-`;
+);
 
 export const MoreButton = styled((props: IMenuButtonProps) => (
   <MenuButton {...props} />
 ))`
   min-width: 0;
-  padding: 4px !important;
 
-  & i:last-of-type {
+  & span {
+    padding-right: 0;
+  }
+
+  & span:last-of-type {
     display: none;
   }
 `;

src/components/cardIcon.scss

@@ -0,0 +1,9 @@
+@import "azure-devops-ui/Core/_platformCommon.scss";
+
+.card-icon {
+    font-size: 28px;
+
+    & > div:last-of-type {
+        margin-left: 10px;
+    }
+}

src/components/cardIcon.tsx

@@ -1,77 +1,65 @@
-import { Icon, IIconProps, TooltipHost } from "office-ui-fabric-react";
+import "./cardIcon.scss";
+import { TooltipHost } from "azure-devops-ui/Tooltip";
 import * as React from "react";
 import { SessionMode, SessionSource } from "../model/session";
-import { ModeDescriptionOffline, ModeDescriptionOnline } from "../resources/resources";
-import styled from "../styles/themed-styles";
-
-const StyledIcon = styled((props: IIconProps) => <Icon {...props} />)`
-    margin-left: 10px;
-`;
+import {
+  ModeDescriptionOffline,
+  ModeDescriptionOnline
+} from "../resources/resources";
+import { Icon } from "office-ui-fabric-react/lib/Icon";
 
 export interface ICardTypeProps {
-    mode: SessionMode;
+  mode: SessionMode;
 
-    source: SessionSource;
+  source: SessionSource;
 }
 
 export class CardIcon extends React.Component<ICardTypeProps> {
-    render(): JSX.Element {
-        const { mode, source } = this.props;
+  render(): JSX.Element {
+    const { mode, source } = this.props;
 
-        const { icon, description } = getIconForMode(mode);
+    const { icon, description } = getIconForMode(mode);
 
-        return (
-            <>
-                <TooltipHost content={description}>
-                    <StyledIcon
-                        styles={{
-                            root: {
-                                fontSize: "28px"
-                            }
-                        }}
-                        iconName={icon}
-                    />
-                </TooltipHost>
-                <TooltipHost>
-                    <StyledIcon
-                        styles={{
-                            root: {
-                                fontSize: "28px"
-                            }
-                        }}
-                        iconName={getIconForSource(source)}
-                    />
-                </TooltipHost>
-            </>
-        );
-    }
+    return (
+      <div className="card-icon">
+        <TooltipHost content={description}>
+          <Icon iconName={icon} />
+        </TooltipHost>
+        <TooltipHost>
+          <Icon iconName={getIconForSource(source)} />
+        </TooltipHost>
+      </div>
+    );
+  }
 }
 
 export function getIconForSource(source: SessionSource): string {
-    switch (source) {
-        case SessionSource.Sprint:
-            return "Sprint";
+  switch (source) {
+    case SessionSource.Sprint:
+      return "Sprint";
 
-        case SessionSource.Query:
-            return "QueryList";
+    case SessionSource.Query:
+      return "QueryList";
 
-        case SessionSource.Ids:
-            return "WorkItem";
-    }
+    case SessionSource.Ids:
+      return "WorkItem";
+  }
 }
 
-export function getIconForMode(mode: SessionMode): { icon: string; description: string; } {
-    switch (mode) {
-        case SessionMode.Online:
-            return {
-                icon: "Transition",
-                description: ModeDescriptionOnline
-            };
+export function getIconForMode(
+  mode: SessionMode
+): { icon: string; description: string } {
+  switch (mode) {
+    case SessionMode.Online:
+      return {
+        icon: "Transition",
+        description: ModeDescriptionOnline
+      };
 
-        case SessionMode.Offline:
-            return {
-                icon: "PlugDisconnected",
-                description: ModeDescriptionOffline
-            };
-    }
-}
+    case SessionMode.Offline:
+      return {
+        icon: "PlugDisconnected",
+        description: ModeDescriptionOffline
+      };
+  }
+}

src/components/sessionCard.scss

@@ -0,0 +1,41 @@
+@import "azure-devops-ui/Core/_platformCommon.scss";
+
+.session-card {
+    height: 100px;
+    max-width: 440px;
+    min-width: 220px;    
+    flex-basis: 220px;
+    margin-right: 32px;
+    margin-bottom: 32px;
+    cursor: pointer;
+    
+    .session-card--content {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+    }
+
+    &:hover,
+    &:active,
+    &:visited {
+        color: black;
+        text-decoration: none;
+    }
+
+    #{&}--title {
+        justify-self: flex-start;
+        color: $primary-text;
+
+        font-weight: 600;
+        font-size: 18px;
+        margin: 0;
+    }
+
+    #{&}--mode {
+        color: $primary-text;
+        flex-grow: 1;
+        display: flex;
+        align-items: flex-end;
+        justify-content: flex-end;
+    }
+}

src/components/sessionCard.tsx

@@ -1,75 +1,54 @@
 import { History } from "history";
 import * as React from "react";
-import { ISession } from "../model/session";
-import styled from "../styles/themed-styles";
-import { CardIcon } from "./cardIcon";
 import { makeUrlSafe } from "../lib/urlSafe";
+import { ISession } from "../model/session";
+import { CardIcon } from "./cardIcon";
+import "./sessionCard.scss";
+import { Button } from "azure-devops-ui/Button";
 
-const CardFrame = styled.a`
-    text-decoration: none;
-    color: black;
-    transition: background-color .5s ease;
-    border-radius: 4px;
-    height: 100px;
-    max-width: 440px;
-    min-width: 200px;
-    flex-basis: 200px;
-    margin-right: 32px;
-    margin-bottom: 32px;
-    background-color: rgb(248, 248, 248);
-    padding: 20px;
-    cursor: pointer;
+const CardTitle: React.StatelessComponent = props => (
+  <h2 className="session-card--title">{props.children}</h2>
+);
 
-    display: flex;
-    flex-direction: column; 
-
-    &:hover {
-        background-color: rgb(234, 234, 234);
-    }
-
-    &:hover, &:active, &:visited {
-        color: black;
-        text-decoration: none;
-    }
-`;
-
-const CardTitle = styled.h2`
-    font-weight: 600;
-    font-size: 18px;
-    margin: 0;
-`;
-
-const CardMode = styled.div`
-    flex-grow: 1;
-    display: flex;
-    align-items: flex-end;
-    justify-content: flex-end;
-`;
+const CardMode: React.StatelessComponent = props => (
+  <div className="session-card--mode">{props.children}</div>
+);
 
 export interface ICardProps {
-    history: History;
-    session: ISession;
+  history: History;
+  session: ISession;
 }
 
 export class SessionCard extends React.Component<ICardProps> {
-    render(): JSX.Element {
-        const { session: { id, mode, name, source } } = this.props;
+  render(): JSX.Element {
+    const {
+      session: { id, mode, name, source }
+    } = this.props;
 
-        return (
-            <CardFrame href={`/session/${id}/${makeUrlSafe(name)}`} onClick={this.navigate}>
-                <CardTitle>{name}</CardTitle>
+    return (
+      <Button
+        className="session-card"
+        href={`/session/${id}/${makeUrlSafe(name)}`}
+        onClick={this.navigate}
+      >
+        <div className="session-card--content">
+          <CardTitle>{name}</CardTitle>
 
-                <CardMode>
-                    <CardIcon mode={mode} source={source} />
-                </CardMode>
-            </CardFrame>
-        );
-    }
+          <CardMode>
+            <CardIcon mode={mode} source={source} />
+          </CardMode>
+        </div>
+      </Button>
+    );
+  }
 
-    private navigate = (e: React.MouseEvent<HTMLAnchorElement>) => {
-        const { history, session: { id, name } } = this.props;
+  private navigate = (e: React.MouseEvent | React.KeyboardEvent) => {
+    const {
+      history,
+      session: { id, name }
+    } = this.props;
 
-        history.push(`/session/${id}/${makeUrlSafe(name)}`);
-        e.preventDefault();
-    }
-}
+    history.push(`/session/${id}/${makeUrlSafe(name)}`);
+    e.preventDefault();
+  };
+}

src/components/title.scss

@@ -0,0 +1,12 @@
+@import "azure-devops-ui/Core/_platformCommon.scss";
+
+.title {
+    color: $primary-text;
+
+    font-size: 28px;
+    line-height: 40px;
+    margin: 0; 
+    padding: 0;
+
+    flex-grow: 1;
+}

src/components/title.tsx

@@ -1,12 +1,6 @@
-import styled from "../styles/themed-styles";
+import * as React from "react";
+import "./title.scss";
 
-export const Title = styled.h1`
-    font-family: "Segoe UI";
-    font-weight: bold;
-    font-size: 28px;
-    line-height: 40px;
-    margin: 0; 
-    padding: 0;
-
-    flex-grow: 1;
-`;
+export const Title: React.StatelessComponent<{}> = props => (
+  <h1 className="title">{props.children}</h1>
+);