In order to remove bottom panel follow the below steps from Wey on the Arch Linux forums:

• Edit /usr/share/gnome-shell/theme/gnome-shell.css: Search for
  #message-tray and comment the block out with /* ... */. This will remove the black bar, but not the icons and their text.



• Next go to /usr/share/gnome-shell/js/ui/messageTray.js: Search for ICON_SIZE (its in line 881 here) and set it to 0:

  
  
  

  ICON_SIZE: 0,
  
  

  
  
  

  About three lines below it states

  
  
  

  this.title = title;
  
  

  
  
  

  Make it

  
  
  

  this.title = '';
  
  

  
  
  

  This makes the whole thing disappear.

(OR) use yanir's solution from the same thread:

• Edit /usr/share/gnome-shell/theme/gnome-shell.css: Search for
  #message-tray and comment the block out with /* ... */. This will remove the black bar, but not the icons and their text.



• edit /usr/share/gnome-shell/js/ui/messageTray.js the following way:
  (the last class at the end of the file)

  
  
  

  const SystemNotificationSource = new Lang.Class({
  
      Name: 'SystemNotificationSource',
  
      Extends: Source,
  
      _init: function() {
  
          this.parent(_("System Information"));
  
          this._setSummaryIcon(this.createNotificationIcon());
  
      },
  
      createNotificationIcon: function() {
  
  //        return new St.Icon({ icon_name: 'dialog-information',
  
  //                             icon_type: St.IconType.SYMBOLIC,
  
  //                             icon_size: this.ICON_SIZE });
  
          return 0;
  
      },
  
      open: function() {
  
          this.destroy();
  
      }
  
  });