fix: Space under header on staging (#620)

frontend/Dockerfile

@@ -44,8 +44,6 @@ ARG CONTACT_EMAIL
 ENV CONTACT_EMAIL=${CONTACT_EMAIL}
 ARG STAGING_BANNER_URL
 ENV STAGING_BANNER_URL=${STAGING_BANNER_URL}
-ARG PRODUCTION_BANNER_URL
-ENV PRODUCTION_BANNER_URL=${PRODUCTION_BANNER_URL}
 ARG HEAPIO_ID
 ENV HEAPIO_ID=${HEAPIO_ID}
 ARG FRONTEND_ORIGIN

frontend/README.md

@@ -33,7 +33,6 @@ $ npm run test
 - `PRODUCTION_DOMAIN`: (optional) Required in order to enable [plausible.io statistics](https://github.com/moritzsternemann/vue-plausible#configuration). In addition to adding it here, the domain (e.g. `auctions.makerdao.network`) should also be registered within [plausible dashboard](https://plausible.io/).
 - `CONTACT_EMAIL`: (optional) Required in order to display contact link in the footer. This email should be able to accept and manage bug reports and other contact requests.
 - `STAGING_BANNER_URL`: (optional) When set a banner will be displayed, warning the user that they are using a staging version. The text will use `STAGING_BANNER_URL` as a link to production UI.
-- `PRODUCTION_BANNER_URL`: (optional) When set a banner will be displayed, notifying the user that they can also use an electron app. The text will use `PRODUCTION_BANNER_URL` as a link the electron app.
 - `MAX_PRIORITY_FEE_PER_GAS_WEI`: (optional, default can be found in core/src/gas.ts) – [EIP-1559](https://eips.ethereum.org/EIPS/eip-1559) `max_priority_fee_per_gas` value
 - `HEAPIO_ID`: (optional) [HeapIO analytics](https://heapanalytics.com/) Project's Environment ID. Required for tracking analytics.
 - `FRONTEND_ORIGIN`: (optional, default empty) – public url of the frontend, eg `https://unified-auctions.makerdao.com`. Used to correctly specify open graph meta tags

frontend/assets/styles/ant-design.less

@@ -1,6 +1,7 @@
 @import '~ant-design-vue/dist/antd.less';
 
 @primary-color: #4331E9;
+@main-light: #eaeaeb;
 @modal-body-padding: 0px;
 @dropdown-selected-color: @text-color;
 @border-width-base: 2px;

frontend/components/auction/collateral/CollateralAuctionFlow.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="doShowBanner ? 'SplitLayoutBannerPrependedContainer' : 'SplitLayoutContainer'">
+    <div>
         <SplitLayout :step.sync="step">
             <template #step0>
                 <div v-if="isExplanationsShown" class="h-1/2">
@@ -216,9 +216,6 @@ export default Vue.extend({
             }
             return null;
         },
-        doShowBanner(): boolean {
-            return !!process.env.STAGING_BANNER_URL || !!process.env.PRODUCTION_BANNER_URL;
-        },
         collateralVatBalance(): BigNumber | undefined {
             if (!this.collateralVatBalanceStore || !this.selectedAuction) {
                 return;
@@ -269,15 +266,6 @@ export default Vue.extend({
 </script>
 
 <style scoped>
-.SplitLayoutContainer {
-    height: calc(100vh - 4rem);
-}
-
-.SplitLayoutBannerPrependedContainer {
-    margin-top: 2.3rem;
-    height: calc(100vh - 6.3rem);
-}
-
 .MainTextContainer {
     min-height: calc(100vh - 10rem);
 }

frontend/components/auction/debt/DebtFlow.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="doShowBanner ? 'SplitLayoutBannerPrependedContainer' : 'SplitLayoutContainer'">
+    <div>
         <SplitLayout :step.sync="step">
             <template #step0>
                 <div v-if="isExplanationsShown" class="h-1/2">
@@ -185,9 +185,6 @@ export default Vue.extend({
         selectedAuctionActionState(): string | undefined {
             return this.auctionActionState[this.selectedAuctionId] || undefined;
         },
-        doShowBanner(): boolean {
-            return !!process.env.STAGING_BANNER_URL || !!process.env.PRODUCTION_BANNER_URL;
-        },
         walletDai(): BigNumber | undefined {
             return this.walletBalances?.walletDAI || undefined;
         },
@@ -231,15 +228,6 @@ export default Vue.extend({
 </script>
 
 <style scoped>
-.SplitLayoutContainer {
-    height: calc(100vh - 4rem);
-}
-
-.SplitLayoutBannerPrependedContainer {
-    margin-top: 2.3rem;
-    height: calc(100vh - 6.3rem);
-}
-
 .DebtTextContainer {
     min-height: calc(100vh - 10rem);
 }

frontend/components/auction/surplus/SurplusFlow.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="doShowBanner ? 'SplitLayoutBannerPrependedContainer' : 'SplitLayoutContainer'">
+    <div>
         <SplitLayout :step.sync="step">
             <template #step0>
                 <div v-if="isExplanationsShown" class="h-1/2">
@@ -190,9 +190,6 @@ export default Vue.extend({
         selectedAuctionActionState(): string | undefined {
             return this.auctionActionState[this.selectedAuctionId] || undefined;
         },
-        doShowBanner(): boolean {
-            return !!process.env.STAGING_BANNER_URL || !!process.env.PRODUCTION_BANNER_URL;
-        },
         walletMKR(): BigNumber | undefined {
             return this.walletBalances?.walletMKR || undefined;
         },
@@ -233,15 +230,6 @@ export default Vue.extend({
 </script>
 
 <style scoped>
-.SplitLayoutContainer {
-    height: calc(100vh - 4rem);
-}
-
-.SplitLayoutBannerPrependedContainer {
-    margin-top: 2.3rem;
-    height: calc(100vh - 6.3rem);
-}
-
 .SurplusTextContainer {
     min-height: calc(100vh - 10rem);
 }

frontend/components/layout/Header.stories.js

@@ -64,7 +64,6 @@ storiesOf('Layout/Header', module)
         template: `<Header
         type="unified"
         :isExplanationsShown.sync="isExplanationsShown"
-        productionBannerUrl='https://github.com'
         @update:isExplanationsShown="updateIsExplanationsShown"
         />`,
     }))

frontend/components/layout/Header.vue

@@ -1,5 +1,6 @@
 <template>
     <div>
+        <StagingBanner v-if="stagingBannerUrl" :url="stagingBannerUrl" />
         <!-- Sky banner -->
         <div class="w-full p-2 text-center bg-banner-red">
             <h1 class="text-white">
@@ -8,7 +9,6 @@
                 saving without giving up control.
             </h1>
         </div>
-        <StagingBanner v-if="stagingBannerUrl" :url="stagingBannerUrl" />
         <header class="bg-gradient-to-b from-primary to-primary-purple dark:from-primary-dark dark:to-primary">
             <nav class="flex items-center py-2 px-4 md:px-10">
                 <HeaderLogo :network="network" :page-name="pageName" />
@@ -116,10 +116,6 @@ export default Vue.extend({
             type: String,
             default: undefined,
         },
-        productionBannerUrl: {
-            type: String,
-            default: undefined,
-        },
         networks: {
             type: Array as PropType<NetworkConfig[]>,
             default: () => [] as NetworkConfig[],

frontend/components/layout/LandingBlock.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="LandingBlock">
-        <div v-if="!$slots.default" class="flex flex-col items-center w-full z-10">
-            <div class="LandingTitle pt-6">{{ title }}</div>
-            <div class="flex flex-col space-y-2 md:flex-row md:space-y-0 my-8">
+        <div v-if="!$slots.default" class="flex flex-col items-center w-full z-10 py-12">
+            <div class="LandingTitle">{{ title }}</div>
+            <div class="flex flex-col space-y-2 md:flex-row md:space-y-0 mt-8">
                 <Button class="SecondaryButton mx-3" @click="$emit('explanations', false)"
                     >I already know how it works</Button
                 >

frontend/components/layout/WalletSelector.vue

@@ -17,8 +17,8 @@
         </template>
     </Select>
     <div v-else-if="!hasAcceptedTerms" class="flex items-center cursor-pointer" @click="$emit('openTermsModal')">
-        <icon type="wallet" class="pr-2 text-3xl md:text-sm" />
-        <span class="hidden lg:inline">Connect a Wallet</span>
+        <icon type="wallet" class="pr-2 text-white text-3xl md:text-sm" />
+        <span class="hidden lg:inline text-white">Connect a Wallet</span>
     </div>
     <Select
         v-else

frontend/components/unified/UnifiedAuctionsView.vue

@@ -1,10 +1,7 @@
 <template>
     <div class="HeightFix flex flex-col w-full h-full items-center">
         <LandingBlock v-if="isExplanationsShown" class="LandingBlock">
-            <h1 class="text-gray-800 dark:text-gray-100">
-                Maker Protocol <br />
-                Unified Auctions
-            </h1>
+            <h1 class="text-gray-800 dark:text-gray-100">Unified Auctions</h1>
         </LandingBlock>
         <div class="flex flex-col w-full items-center space-y-4 md:space-y-8 mt-4 md:mt-8 mb-4 px-4">
             <TextBlock v-if="isExplanationsShown" title="Different auction types" class="max-w-screen-sm">
@@ -189,10 +186,10 @@ export default Vue.extend({
                     filters: [],
                 },
                 {
-                    title: 'SAS Collateral Auction Twitter Bot',
+                    title: 'Collateral Auction Twitter Bot',
                     description: `Tweets about collateral auctions and facilitates access to auction participation`,
                     links: {
-                        profile: 'https://twitter.com/MakerDAO_SAS',
+                        profile: 'https://x.com/sidestream_labs',
                     },
                     filters: ['collateral'],
                 },

frontend/components/vault/VaultFlow.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="doShowHeader ? 'SplitLayoutBannerPrependedContainer' : 'SplitLayoutContainer'">
+    <div>
         <SplitLayout :step.sync="step">
             <template #step0>
                 <div v-if="isExplanationsShown" class="h-1/2">
@@ -140,9 +140,6 @@ export default Vue.extend({
                 ) || null
             );
         },
-        doShowHeader(): boolean {
-            return !!process.env.STAGING_BANNER_URL || !!process.env.PRODUCTION_BANNER_URL;
-        },
     },
     watch: {
         selectedVaultId: {
@@ -179,15 +176,6 @@ export default Vue.extend({
 </script>
 
 <style scoped>
-.SplitLayoutContainer {
-    height: calc(100vh - 4rem);
-}
-
-.SplitLayoutBannerPrependedContainer {
-    margin-top: 2.3rem;
-    height: calc(100vh - 6.3rem);
-}
-
 .MainTextContainer {
     min-height: calc(100vh - 10rem);
 }

frontend/containers/UnifiedContainer.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="doShowHeader ? 'UnifiedHeaderPrependedContainer' : 'UnifiedContainer'">
+    <div>
         <UnifiedAuctionsView :is-explanations-shown.sync="isExplanationsShown" />
     </div>
 </template>
@@ -21,20 +21,6 @@ export default Vue.extend({
                 this.$store.dispatch('preferences/setExplanationsAction', newIsExplanationsShown);
             },
         },
-        doShowHeader(): boolean {
-            return !!process.env.STAGING_BANNER_URL || !!process.env.PRODUCTION_BANNER_URL;
-        },
     },
 });
 </script>
-
-<style scoped>
-.UnifiedContainer {
-    min-height: calc(100vh - 9.8rem);
-}
-
-.UnifiedHeaderPrependedContainer {
-    margin-top: 2.3rem;
-    min-height: calc(100vh - 12.1rem);
-}
-</style>

frontend/data/FeatureTexts.ts

@@ -160,8 +160,8 @@ const features: FeatureList[] = [
         ],
     },
     {
-        title: `Twitter Bot`,
-        url: `https://twitter.com/MakerDAO_SAS`,
+        title: `X Bot`,
+        url: `https://x.com/sidestream_labs`,
         items: [
             {
                 text: `The bot informs via a tweet about each new started collateral auction`,

frontend/layouts/default.vue

@@ -12,7 +12,6 @@
             :has-accepted-terms="hasAcceptedTerms"
             :staging-banner-url="stagingBannerURL"
             :networks="networks"
-            :production-banner-url="productionBannerURL"
             :is-changing-network="isChangingNetwork"
             @changeWalletType="changeWalletType"
             @changeRpcUrl="isRpcUrlConfigurationModalShown = true"
@@ -140,9 +139,6 @@ export default Vue.extend({
         pageName(): string {
             return this.$route?.name || '';
         },
-        productionBannerURL() {
-            return process.env.PRODUCTION_BANNER_URL;
-        },
         headerType(): string {
             return (
                 {

frontend/nuxt.config.js

@@ -23,7 +23,6 @@ export default {
         CONTACT_EMAIL: process.env.CONTACT_EMAIL || undefined,
         GITHUB_URL: pkg.repository.url,
         STAGING_BANNER_URL: process.env.STAGING_BANNER_URL || undefined,
-        PRODUCTION_BANNER_URL: process.env.PRODUCTION_BANNER_URL || undefined,
         HEAPIO_ID: process.env.HEAPIO_ID || undefined,
         APPLICATION_VERSION: uuidv4(), // hardcoded this during build
     },

frontend/pages/surplus.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="flex flex-col w-full items-center min-h-screen">
-        <div class="max-w-screen-sm text-gray-900 dark:text-gray-300 my-10">
+        <div class="max-w-screen-sm text-gray-900 dark:text-gray-300 p-8">
             <span> This page has been deprecated </span>
             <span>
                 Note: surplus auctions are deprecated since the introduction of