Merge pull request #4196 from topcoder-platform/comcast-community

Fixes #4195

Author: sushilshinde

src/assets/themes/comcast/corporate_Official-Comcast-Logo.png

@@ -16,7 +16,7 @@
     "img": "/community-app-assets/themes/comcast/corporate_Official-Comcast-Logo.png",
     "url": "https://www.comcast.com"
   }, {
-    "img": "/community-app-assets/themes/comcast/logo_topcoder_with_name.svg",
+    "img": "/community-app-assets/themes/comcast/logo_topcoder_with_name.png",
     "url": "https://www.topcoder.com"
   }],
   "footerText": "© Copyright Topcoder, 2020",

src/assets/themes/comcast/logo_topcoder_with_name.png

@@ -0,0 +1,56 @@
+/**
+ * Default button style: white background, dark gray text, gray border,
+ * a bit rounded corners.
+ */
+
+@import "~styles/mixins";
+
+@mixin feedback {
+  &:active {
+    background: white;
+    border: 1px solid #00a2e0;
+  }
+
+  &:focus {
+    background: white;
+    border: 1px solid #00a2e0;
+  }
+
+  &:hover {
+    background: white;
+    border: 1px solid #00a2e0;
+  }
+}
+
+.button {
+  background: white;
+  border: 1px solid #00a2e0;
+  border-radius: 40px;
+  // display: inline-block;
+  font: 16px/36px "Akkurat regular", monospace !important;
+  // margin: $base-unit;
+  width: 250px;
+  text-align: center;
+  vertical-align: top;
+
+  a,
+  &,
+  &:visited {
+    color: #00a2e0 !important;
+    text-decoration: none !important;
+  }
+}
+
+.disabled {
+  background: white;
+  color: #00a2e0;
+  cursor: not-allowed;
+}
+
+.link {
+  @include feedback;
+}
+
+.regular {
+  @include feedback;
+}

src/assets/themes/comcast/logo_topcoder_with_name.svg

@@ -0,0 +1,157 @@
+/*
+  Theme for Header component used in Comcast site
+*/
+@import '~styles/mixins';
+
+.container {
+  background-color: #2a2a2a;
+  box-shadow: none;
+  min-height: 80px;
+
+  @include lg-to-xl {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+.challengeDropdown {
+  @include roboto-regular;
+
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 25px;
+  color: $tc-white;
+  text-transform: uppercase;
+
+  :global {
+    .Select-menu-outer {
+      padding-left: 0;
+      padding-right: 0;
+      border-radius: 0 0 6px 6px;
+      box-shadow: 0 2px 9px 0 rgba(38, 38, 40, 0.15);
+
+      .Select-option {
+        @include roboto-regular;
+
+        font-size: 13px;
+        font-weight: 400;
+        line-height: 30px;
+        text-transform: uppercase;
+        color: #47474f;
+        padding-left: 10px;
+        padding-right: 20px;
+
+        &.is-selected,
+        &:hover {
+          background-color: #dcdce0;
+        }
+      }
+    }
+  }
+
+  @include lg-to-xl {
+    border-left: none;
+    padding-left: 90px;
+  }
+}
+
+.header {
+  .mobileToggle {
+    display: none;
+  }
+
+  .logosWrap {
+    margin-left: 21px;
+    display: flex;
+    align-items: center;
+
+    @include sm-to-md {
+      display: flex;
+      padding-top: 15px;
+      margin-left: 15px;
+    }
+  }
+}
+
+.menuWrap {
+  @include lg-to-xl {
+    max-width: $screen-lg;
+    margin-left: -255px;
+  }
+
+  .menu {
+    display: flex;
+
+    @include sm-to-md {
+      display: flex;
+      padding: 15px;
+      justify-content: flex-start;
+    }
+  }
+
+  .menuItem {
+    margin-right: 30px;
+
+    .menuLink {
+      color: #fff;
+      font-family: Roboto, sans-serif;
+      font-size: 14px;
+      font-weight: 700;
+      line-height: 30px;
+
+      &:hover {
+        color: #43d7b0;
+      }
+    }
+
+    .menuLinkActive {
+      color: #43d7b0;
+    }
+  }
+}
+
+.menuWrapOpen {
+  @include xs-to-md {
+    overflow: visible;
+  }
+}
+
+.userWrap {
+  @include lg-to-xl {
+    margin-right: 30px;
+  }
+
+  @include sm-to-md {
+    display: none;
+  }
+
+  .additionalLogos {
+    @include xs-to-sm {
+      margin: 0;
+    }
+  }
+
+  .userMenu {
+    @include lg-to-xl {
+      display: flex;
+      align-items: center;
+    }
+
+    .userMenuHandle {
+      color: white !important;
+      font-family: Roboto, sans-serif;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 30px;
+      text-decoration: underline;
+    }
+  }
+}
+
+.logo {
+  img {
+    max-height: 34px;
+    margin-right: 20px;
+  }
+}

src/server/tc-communities/comcast/metadata.json

@@ -0,0 +1,15 @@
+import dangerButtonTheme from
+  'components/buttons/outline/round/akkurat/danger.scss';
+import primaryButtonTheme from
+  'components/buttons/outline/round/akkurat/primary.scss';
+import defaultButtonTheme from
+  'components/buttons/outline/round/akkurat/default.scss';
+import headerTheme from './header.scss';
+
+export default {
+  CommunityHeader: headerTheme,
+  DangerButton: dangerButtonTheme,
+  DefaultButton: defaultButtonTheme,
+  PrimaryButton: primaryButtonTheme,
+  SecondaryButton: primaryButtonTheme,
+};

src/shared/components/tc-communities/communities/comcast/theme/buttons/default.scss

@@ -5,7 +5,7 @@
 import ChallengeDetails from 'routes/ChallengeDetails';
 import ChallengeListing from 'routes/Communities/ChallengeListing';
 import Error404 from 'components/Error404';
-import Footer from 'components/tc-communities/communities/cs/Footer';
+import Footer from 'components/TopcoderFooter';
 import Header from 'containers/tc-communities/Header';
 import PT from 'prop-types';
 import React from 'react';
@@ -15,7 +15,7 @@ import TermsDetail from 'routes/TermsDetail';
 import Profile from 'routes/Profile';
 import ProfileStats from 'routes/ProfileStats';
 import Settings from 'routes/Settings';
-import theme from 'components/tc-communities/communities/cs/theme';
+import theme from 'components/tc-communities/communities/comcast/theme';
 import { ThemeProvider } from 'react-css-super-themr';
 import { Route, Switch } from 'react-router-dom';
 import ContentfulRoute from 'components/Contentful/Route';